{"_id":"@material/mwc-slider","_rev":"719-9d103a147dc3790cfb0ca6fe0ee1f931","name":"@material/mwc-slider","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-slider","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.6.0","@material/slider":"^1.0.0","lit-html":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","_id":"@material/mwc-slider@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-jNLSwIE/sgFs6u66yghZWppZhs+VO+DMZhglZGK8ermc1sAEQ/Kl7RgNW5w/FSqhOsASHTL1X8CBw/9BfWGZ8g==","shasum":"bf9a19a7801c19e06741c486836ed1b48f5cda20","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.6.0.tgz","fileCount":15,"unpackedSize":282972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAeCRA9TVsSAnZWagAAB8cP/jZPzMddb2OKAvXFkkvp\nzeCyf1APpNnBZ/LQNCZaniUdCNDZ3iQUHGCBpRqOvpmYSdxf5Y3lqli1DOAf\ner4WSEqt0gXrbvh3OqpI2KOAcfeH8EM9vaG3WDySXoTINI3oat8oGvdBi+sH\n4vwGVHg4KyFiMzUNdYkP3hBkpg4l99dkGUIsP1oz3i5IzG4OFkew+tUGUDyA\nUipc0mcrheZKDSVvF0IulLiU4ONPHFZH9rnddCoF59dNTgcyjSDoQuUCfWyJ\nBZH/aa1RIyH1kePN8msVRm5lWxDn6VuT6jhmbutG9GNUx6YkINoIEblwsuCC\nO2CXNf2/JZAplW/4cr80M0RCEshqZBebfOK8bG0BrkvDiRdNByD2Uoi39Nbw\nMW5FyF8Kli1NyaIll1Z9CB63COBzFhd3e4MjF4tYK9Rbbzm6I4MdTxvYzXDv\nAXnS0cXELyvaQYVHURKgQl3yduXrf9hWQOisquzEaa0OKJKSYQq9lF6fCygE\nvQBE3cEVX5pi+795F9qoiaNrIyrhbV7U+zYrcnVenvdqtLQGYTdCStqqUErT\nXOHfgJk7lwMfjVjRQT8XuTYZwlu0PQ/daQb0OPOvCvu0Fjlov86iwh3zW5iA\nMH3cWTtgTg1/OIqJC9v+1kY4cdKprx4dwb6GUSN0PBazzh8HvSUQGNuY+4iQ\nr59C\r\n=iOJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz/8rhdAbExmSxzG+I5gpl/ssNqyZkIDKmMOxyZBSmMQIgUbGyrKSYI88vJhXQE3gn98odcCl4GflJjS4YrS72mvI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.6.0_1559773213122_0.02835499609138803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-slider","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/slider":"^3.0.0","lit-html":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-q6OfXc2aBdk9uuUs/7Tz874I9vBhjEkMtGh19+Yalbz/v8dbymKGV2RaRS+nC7GSphAsYyQ+WqoaHSr47fwjoQ==","shasum":"aa364228922d0d823cfb0e488e95b8eef9ff6abf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.7.0.tgz","fileCount":16,"unpackedSize":66467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9eCRA9TVsSAnZWagAAX2EQAIuAM/69aZNPolC7NkH8\nNdwTlEm9vgRUUjtrJOSwbBt8WXZBowaDeh/iWyVDualD81F5QlGMtJtCRFgG\nk5N5Y4PoAU28gEO+IsQUSehYZMrpU+BV7dbOdQ8aDqeMo4lYFgOJPyam7IZs\nIf/8DnKFWVZuo+0zsTQn5eopnLmctdOjUhO+T9g7GseyJx1adRIH294bsIv1\nCBoMahsLlhysCfOcfzNnglOT2v4dXp4MK490ujKp9S+h6TouG4okazkGSnrr\nZDaxEN/RV/FAmtiqKl10VUUgSQZ25f4b+ryYjVlb+kDYMSDg84kF133jJwOQ\ndIuEyMpyuecSDpj6XEsn4uL2MGu8ggShET8EXMs75cRNn/r+mKwuxbyrWdc1\ntwqpLGfc7fxIUbI1I5EabIQuNJWEXYXIJ6o2g2cbTr8v0WeBWJmo+8HUfK4X\nP8dOaeoXrsFyTytO9dSmlClcyE/AKlm0HE8VW6dE0TeWr+fpMc1OllhPkk+D\nmeUDLw5KeLKwf02uacxNQfkbrFOqpVhw9blqIEQvhLygDCmPwpewiG5AsGiJ\nruxKJ4m3+bPzNJdI3OPZSMrkGIukSKQCBmcWxNOa2m1t2wzQwMWPcWjEnNS/\nPOjc7SgLuLo2ZX+SHyl6so04j0K5shUkATFQwtMlVV6FEclTABIBUlIfuD3X\nuKPG\r\n=e82J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE/MEMLc+HJ2qNcyFwt+PeJzpH4iyrflgjcBGrKhGZAwIhAM2WnK1j2XjvFJSqDnQYksTV6yAGb4kswCAc+kCkgdr1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.7.0_1566941021534_0.1112180053937406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-slider","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/slider":"^3.0.0","lit-html":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-y8GiGSB2x9wZC1oHdCnMKSk0pwfBhiYTNgYOju95PAWAsbD6C+/lQqMJHbh+z5Z1OGdAvIInpJsCIt2M4cCntg==","shasum":"afa3046cc165378e2138d56fa23f834f9200d403","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.7.1.tgz","fileCount":16,"unpackedSize":66442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezeCRA9TVsSAnZWagAAHLEQAJ1IPrRMZulWl0hs7DS9\npj0672bH5Hw41djQOgCRYyx75w0ruXYBMSDq3bLuxwZSMw684fX7OHHvI10v\nL4dmERAx8zhFgFEJMOWXD6vFpCVerhbboxkpfJyGykQfR6v/caASrmx4e3Ci\nrvxtpZR2zt3UHfYzoLNLTaboIqh2BvhE/Vl+b+vXKxmckbKEjYk/XI/fVZG2\nU4JIZg1Fw07XO4Crjbj7IbGZSZuKK/Jv6g8nwF5dNpAHXAQazheaSdlOToj0\nptQQ+XbHSDHRdi+qpL/0j6kjGiqc48oujOcJaHPIsQCQe939QULVTIK3AkOW\ndhrLpaHtfIVf6Ej48OC5FGeiN3IABWNm8ScaV2MGbqEGOY+1BZFcKrw6t0QO\n9h8VbKT/98jrO5H3ShXDMT0W78M5aMo47eCg5K67xmYcg4nsJVUm+DlAvIB2\n5bWA546jO8Db3AuU/nuDPYN0ufzMd5pp8bNIUsequYgMw+mPXZu7blkLsTIW\nImJ9HYUIpAjkRboCTmq1Rr+0VYGNVnUgXomKJ6qnmRhByVL7FW0xm87Ys9lb\nLzqbR66b2wdDFESyYbkbCzcbVBMVHw6Yh9DqYC+2xSaorIxyTYvsfCyWuhbu\naf2iwUySgO9JUaKJPEBcjvf0JFvfh7MCWmQRu07Qsgmi6Y2xL/lwVYNRlZdP\nEW6L\r\n=49rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBH29lcYLzKkU7apAa6mXOsaJI8JhrV1ukeUednzk8dsAiEAny888cJkjgnJGI+01MmrhDVdLWn0Cf7fNdAj/BRdxZc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.7.1_1566960862083_0.16812456755798233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-slider","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/slider":"^3.0.0","lit-html":"^1.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-i6IgzUGn0YMqg0yHDYVrXMNFhHsJzUpfYoNhYqsgKBhDGLaxUr0o7xwYt3GejvU3VfiFRoR3lQmshBxkSme3dw==","shasum":"e70097c5ecf6bb82a8b103f027e00417fef39e47","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.8.0.tgz","fileCount":16,"unpackedSize":65453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+KCRA9TVsSAnZWagAAqrgP/0/3vAHk63gQTpcNAoVR\nsIg2Gz4B432T1JbK2f8KE7LOayzFIk3aVaQ6p+x/MUE0Wf77+bGH7c10TfwM\nzBwy6dkuStR1lGPu/jMBUpi48Xty9TWemS00WD7y6jiHjyQph2PUrwHK5Tp1\n0VC7EICUJAsyiJv2yVYqUSa6OSrOdDW6KJN1Amf3Vu2E0k0+FLj3+gJaQKiG\n/r7K90EzibXv+jy6M82VOu106gpgto8bhoHAbRERTrs70Trd/xd+lTLZdSEw\n5SCuXqlriyF+L2YLtIyQ8wKljFcOIJR0WqQkrhguw4DFvUQ/o2TeSaoQi4ke\nMPJ6QoSgKntsV7JuXRGuKMhwdrdE4H1UTgEnUOBbDlHRo8GO2UyZAD8lVPlt\nEp/c1J9Fe3DBRjupumAZRD7HANWLHLLUNcbMhYU1/+8bQur6xMqyW1AqyCf1\nhVcI8z67VBRCu8vp5qPimC4JXTItuYb7AgEgF2RCUOcTGvT43n30uL+c+fz+\nLBpVq6GMYbU+IP+QAhT8h/DvN1ibxqB2yVWNWFI2H9vEmDBbr/S2s5SUwk1n\nzGkIYgL2yz9fbt/Pf8xpkwQUjCjrFv1Kuba1mxz/ZKXtCakvMMw92NlcxRKs\n+WyFr9ak1cFtZ+1LTc18U/6QZ3k84xhm4KHUcF/3ZQCpKw+iILps0JXpFi8s\nuQGP\r\n=7A6T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGffqcq6HKMHr3ZfDly/7ySC1S2UTcBkPSMQ1FL7+WGSAiEAm8l82j9t2wZulBWCXE8zNIy49sVuzU/hzFG8h2Y3obQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.8.0_1567555465859_0.8476999126835116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-slider","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/slider":"^3.0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-nvMmp+FwYPE7fKtVzuvtIBU4KyZ/Piqv8pGKjrV7Em/jo7+Z4LxU2Ki/5MmSl4YEYfvJAYS+qWUa5Rmm2CmxXA==","shasum":"a5f418cf5d7838ec673d815bf09724832afd7d25","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.9.0.tgz","fileCount":16,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeKCRA9TVsSAnZWagAAp5kP/i2rytk4URqHGBNWMDQO\n+RYGHtZOOMQlShhjy30npmb7ByTurvZxyAp12y+apHvA4RSNRz0xgubSbpkp\n4GGbl6N5WPqYs3u7OhX7ZCDk+NVfRufm9J7P/mLQJvFp4TYS3KRXLlftz15z\niUI0blsWwNMSaqoA+H8hbJq0H7ogQhBUzdevvp8hX1nGD+5q3hDWkn0KKsED\njPU4kyRgxhe8mI+P1j4pgVZAkVFPUKOtyFT1uKr12ASci21c1igXcdtmUTc3\nMA3RzTjdp3FxO3g1yOFEjoe8AfEWazuw6nxyZ3MB0pMoE1fOnxnrhCtwmgBz\nTRLAlQh1DH/3ZuIoUpG1J75WOui0pLCponKv2CFqTo1+1kNDO7WurU0HBGbC\nipRF+haGF4DPgJ8ZKx6dmmP5xj7g0i8s/Z3RUnPtfRHMN5DkQLUxibDpLw1x\nd6gEpYeGkt5Upzy3clFXPoypze+kTcwfxe3agSysFZNmzh8Ajd1QrTb9/FTW\nbV5riHxUEsrcWnAIkAY55PxB7tOwACQjZX/+zEJGuhavgtZdWZ6qs3mNRRLl\n0G5v6TQJX3rTpdvCV+kJOT+cOOlC+exEgPNp2/l/yfAdqMiG3aZU5A7ZIGkO\nIbOrYIZhyL0BMXZPrLXYnNy4RPBJETAPTPdaz1XeUFvXsbMEZbWKkQElTV5y\nfnJ/\r\n=Puif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwd4iZeeWs80lhX4trdVX0AATk8+3c6nWP4vL691oZQwIhAKAM5Wog07beNMcyAcA/H/ue8k4pqKNYpAtaXYWqioJ3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.9.0_1569548169675_0.30083561722002194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-slider","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/slider":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-xRNG/vzYtTkjs4UYNpAv7TOEUbFueOKclwO2aEQAKC1xyq9UQI40oemvyqR8VEUC5dQUyGWk3lF68emDx/NyrA==","shasum":"97fe8665b62b39e98d5c8d91c88bf741d6362057","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.9.1.tgz","fileCount":16,"unpackedSize":64114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm36CRA9TVsSAnZWagAA2n8QAIpjlAoCPvorrg5dYaRS\nf2q4whgKNt9oJxYhFCfl99WyuKpHTwJ4VHHioLa597nvgrhOI3W+7qMDlRb5\nSzWir5fslYVsc5EQDKwVjB3UEmVqZKNGKfSJum+VsuD6SeJsXN8Y+nV1ernI\n0vq66Rqsxl5Q4cQGRyo9azT06XPrzZ0/bAGxtYVeuIE+jUEe10Ms9y3qQPyN\nx+j2ocTL02IcMq/VGDnjrtmQb+hn/whPYFrYXN2laN/2enkHexGiNbtOnKXc\nYJb2ofS92Dt2N3OmXUaXDT1OZxYLJoBGc23g6bFdYak9gcfhWDfxX5p/f9iV\nGAOeZYoQyYfpraZbMuV7LRyGd1ZhDkQ8TSvD1C7LH2Mxc8OMPkR8skXdIWY8\nNVt2VS/yzh1DOnb2mq+d451BiHmdHtXMa+Dx36M+NS+uJPvQaqL4BxNbb28F\nAG6jYvdpA11SeFbDnmhhIa8LmtUuOf/U4hJDb87EmH1JqX9nLxMl36/5j1I6\nZ4KRgbIUvObB8DjMqb3HICmOawj1YEx/HFDl90Hd+of8RuDPqPcZNZ+F2aRs\nR+SfyvgzSND8H6lnOA4S0igWS8eRrxCZ8ptsxf7kTN7X6LyPOZ23+tHGr0Ba\n35pKloPvGEpc0KARQQ3EiRtH/KzTRjrRM1Fa5hKe+rQ/I/asPc9tAv+Ke1IV\nI7g/\r\n=8XPa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD77DdlHhPFh6/AUw5pAGJBNSngXzzxAsJDHAVVUe2+KQIhAMcozqlPBVojtpPzQlS5geIGF9/lbk/TCn4DwZLAe2kY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.9.1_1569877497940_0.04600958575783465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-slider","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/slider":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-8N40amrPcuROkr8mPBUOdTmxxxF9IpVWncsTClEH9PcTODIwJA/5DB0rMeYNlCfD5bvpdy2J+uJL77fKX8+SbA==","shasum":"a791c6a88bd06c275feba84105f570dc95ca1c42","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.10.0.tgz","fileCount":16,"unpackedSize":70648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAMCRA9TVsSAnZWagAAINkP/12dllqrGFoPkZU/u1Kp\nm+x+hJK8+nuiEdnXVDWmVKnaXqTFvWNxk6fIOQZes1mT1HNiwYHcQTrtTNT2\nTT39VHWfBEz2i2eMzG8W8pzpBjv79BsHqPImZrnx7AEgsPnZRT3GeCmvFLeE\nOGoO/X5UukpcVOJzPVrEvuHiTyFBhTEFqqlAXLCCPlc4NF2n0LJ8w0vtgKUI\n2wRJVXk2h7SaoXYFWE787RBZsOB4QygrfZZxTBIYZMrF4X0rl+ay3Ge2JPhZ\n/jgUuE42iRfJ2fUI8onWZnZSJWhEsADvN02VXi98DBO8DJoYoMgRVkzXNP+H\nnslG3mpmukgoSOSbIcxFWo78DIO9KZhfjM84XCuQlpa3U5lGn5knrxOG4a8j\nhuMaOD4/9ohU5xemV5dsn2kmnG5hLSgzDnEZgnZeEVmdOV+Le0cIdtIhPFDe\nRetVpvaq/Gsap4dJAkkL8iYJf1OWH0JGbiRJkpwzQmubhf5Hu5rpah0wFeHa\n4xKaKxFhvsiqXVwLwOVskhhOZH2JKA+ZEoJTeYVmo5+Cp6lFdBJg6fsl6XZO\nRlNYXUA2JGeSv12lB+Csf/FWe1taNkLD5ctqU7uLn4qLazRvsSkidcUPLEiS\nv7etIzuTNIfelMyMPi3XZiiZLwSHVORjhEyp0sDvO+LU1eg6ZbTg4/p6G1n4\n863A\r\n=3yCZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChUzlU+10u62JIChnO4Uxwnz4/nCxfJNFYIuW8lHP58wIhAP4HzgzFHZxLP485HplgoVqaHzva7cV+Fahzm6nveY1B"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.10.0_1570836491476_0.5810209985182015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-slider","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/slider":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-ycmnvtl996DVPDJyR5BjdMOK/7V69VIhWhcEu8YFWO8N39Un2G8TzKAzu7d+z007yHDLvM/t84AVSupza2hD2A==","shasum":"24317c78c4a9c3f07ab244491af00cf93efc7a01","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.11.0.tgz","fileCount":16,"unpackedSize":77892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3oCRA9TVsSAnZWagAA/DwP/1CDkzM7Gb551Up7m96R\nPqcM4E8NkAUCYUan/TUSEStkePkYtFwGAT4NnOaXc/pDA5gWiwTMtbZGM3Y3\nvfBDmVS1gjPjWKq+Pe9ta6pDiI/cAlKYTGG0rpj2luDXe41YCGY6JNj06neB\nY244/+p3fWanG2LtkECyxuVpiQnO19mAGgimeP6PiF8TA6g22rQ/qIyfGsF9\n80tds79pVpZrgTfLiJlZKqoJgjHUD5B6Cr5dHV3u6ooaL1KMygqFoUM1jJ3w\nZCZC7BtklpZM7cXACqbBbD0a/omiZt6wpRgYksyY+/2kjlPhRzIB6vZ6sgrH\nsFFwPP6/Mng/1OspWr32s1/6bA0wARl0lr3uKS23qAz1lm3lTgWRHahTCgNb\nEs6uCvEYTkz6y6PCVbyGvA/g1BmhtMOFjgVlf2LvobPlqCaxLGhxgEUPdq9h\n4RBT6KzYOjo7Wzj+KpqRnhn6LgtEs+aAu+2BtvXXjF0G6V69gMxyoIRZurDw\nJnZrYTMFWz59nGlrB495pK230OpGEnoSFUuwUwDdTpMqBIgofc38xBvtiSYs\nRJgKwAcHC1xSIuXEdRLaOZ5Wz/IsO4YArITLgjiHWmjeMllwRX5+8VI6fnhf\nVUaObPe021pg2eF2c28KioeEMLTt+xx3EgOH541DVDFV3ajLqJ8HJXe9jejp\nwIUn\r\n=t7Rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9/2vU4bvtGKm/GI9SBnXChz4hY6K55Yg+pFp/fJoqlAIhAL8rHPwprIplMiiVF6o8WrmIE1KQDWobhwq8ZUxZp+SI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.11.0_1574804966744_0.022640116916432085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-slider","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/slider":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Um6pACapUKne7rae7ftTJqp7NfL2pi3DYrUT0aFj9lXt0Hjlp6OuSpfHhq64zoywg6SaKJNb1vbTQPQnk0y/8w==","shasum":"271eed9cf506bcd827419cd9cf04a202ceee766b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.11.1.tgz","fileCount":16,"unpackedSize":77892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK9CRA9TVsSAnZWagAAUdIP/A/ISoCKGSrCO9SAhd+T\nmodc5tcBBefkJcEbjAJTBDun+owU6LiHr0uU0qtMonsyJLhMzdtOrqBT9bsm\nbr/vbymJrOe128of0VPCS7+GGcTo6Ni8NMBdmyN5gDp3qtOdW4IfZ/qUnclk\njTPIZU8sxX3USFnsPRGUX98a80oc+vspFI9cAplFpS6hGgtVCiePA7tsh5ik\nNEId7E+gsVc2iktCPXU1vkFH1W1fByVykyRqKRs5lfFos+lLTtyiyV5zrqZq\nPm/pD7dzdiWcsz9Z/6UnYIB3fao+K02Z+XNDseTkTTwpx2Ih6vXqymXyIOV2\nkSzDDohMtcpavw7x758I9Z4sGYX0XuGkULffC3snx9tIbAIJF7JyDJdLjBgU\nHO0zU6cG4Ce8Et85qzKcYek3rnpaJf5y3uRErlUUhigKPiRZaBP9gG76Ley8\nHEsoO8jQlaeN00iDQlc7TE+AgW6oBPndvfYQcc9Yq+T2pPn8caXA414Ppvb0\nOEqk26Hzi25SQHtrewhVkrbISLHh8hWDTRXG6xRAPPL3uimQDOWs1Tdb8T1x\nLCoRGnPJO3m0wVDDwUjrUrUrN5GRuE17roJYlqRnoM9VEmu/61AsChaiZLgP\nUHU17Gd9/wiVd83PH3e4TK/75KClPagIZkSrrQUHlbZV30vJwfsXh9AHDUfY\nW/Q3\r\n=JqMd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQvUlHUwz94b5XUwL9ZcuqPpOFZk8ORPCfn6D/E8H4cQIgdrOrRtZy0iuJ6MloyPYpHY+g8YWnQhYJLtjkdD690EI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.11.1_1574814390017_0.959789550459327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-slider","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/slider":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-ge3ehxyEvLW/L4SkQe5D5/fyd+kX/uP+QFDJEbhxMNo/2KpjS2QzSDto0l4mbLk98FvGnR/lt7hPmL1DeXl9cg==","shasum":"d90e6db0af3f92335c6c773e53ce4e1183ec2aab","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.12.0.tgz","fileCount":16,"unpackedSize":77892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkjCRA9TVsSAnZWagAAiXYP/Rch4byJg+GfZiJKao0c\nKhWTlXBOuN0+dNpAqw0LvC31RbYLFqEgQCZEiOH8/Mkzc5r9L7UPGsjxYvxf\nEc5QATVRuRqf3eyDm2GI6Ezt2x34fRVKxLONAKmOmkKajr8399m55KAhGb6+\n0TVwFaD09ZP9t/oKKUOwNHiDyVkrwiqLtTHwnVJWDZr1xLEihvXZKblXxkfL\n5x+2EUCovAUD4WdRdNIdYLcV5jNM724+pP6gh81bt2q+eXjYYX0ZtOOHCQWs\nzhkBSBmrtJcbXiSSeqht1ep6GxCX+r4PLBuHlypXSoHXkDl9IcSHHQcgRhfN\nCPz1I9adkmv1shwJKa1wYvDeTjlj0Wif87ZB0Oh+2XhAfWbyJOMmugnRsUAJ\nC7WXyaDuGWfphiZXRnRHz7g5nXXkipOiaNiIp8v8lrj4+iWwCSjfCdnsj4d7\nHaNl26XZ3wTW2lV3OkyIhwnjy8bGlA3AsAOwKi/aBrAc/pQDcefXJrotHOgp\nfgrwAFoV5h1rHBQYKQT5GlSKJdOyvK/gdjF9z6acr2QvDRJpLG0fC6KZaN1R\nn4pu0SOc2jrKFLYHzNyfNIqGC0z+fN//Z9s6TZ2uVa9vcHnE83N9Kf30Rt+g\nxjX7G0kFjEkO+a8Ql7z0Qj4L4n52uMf763KF1xkvS8aKOsrYDmOtWn4mIgrF\nlOXH\r\n=Ka4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCud4jOJmEJXSdVA9Pd5zwo2cpD6lEQXSza+4yyjUZ55wIhAPdc+3JZlBMmV6qOiERMEe2G0MOzAJtPlOXyJurcSJ0w"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.12.0_1576626467229_0.27364412116335357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-slider","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/slider":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-acDU46XEwT5T+BuETgR3VIz9RwsUxwseZCbi2/nRXIRGXyxb75RAGcfICWbqoWSJ8Q3PX6yksnrvRF2vNR26ag==","shasum":"b60481ec5674376660cc981e27deaeb9c4d68435","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.13.0.tgz","fileCount":16,"unpackedSize":78556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPckCRA9TVsSAnZWagAAvnAP/39ki9+/pqqKi2hsahH2\nlFYkBbAf0epix3V/420Qm2pByqjWyn2w6FaSWGWtGivbfyiklGyr+wJm2E4i\nxkR6N3PGcIGKVfjB8UbNSGvrtVQcKXl6ytQxUFMs1nEr5Un1rnfqGU791Iq7\n6WPKKBmVUeEUG+kuPIGHVAESCoK9UcYiZvOrqeKDg8hzBM5Ko3anRfuNS8t2\n2ZaxmyIyq0NxTiHPQxmgKekInPZS+YIEabIhPrqXcHFexUBszk35giCn8Q99\nAbTc0ccAKjOVfBMh5sqFTxNqw6fvj9K3FpW44+YYLpzIT1Aa5q8Kb8RcfJ+r\nPnPJXYJTxl6KIOGzKpJlg82FaW/gtl7TKhqgEkzH8VFtzN9pJWhzutjQon6h\nAZ8prmAo8IIYyQz761AVy1yfDDrH7HaQ0byXhaonL0pc7dBXXb5MlS0ijoYY\nCTHkCcYyAtAeRz3tstjomgoLtVG6FhxEjUO5zkwDItPnV8JUKfR/oV3415xf\nVO0oDnWOxt/Wst0fZXn7efHLcKXDqaHr0tKlK/oqASwEgF4CuiHa1VK+F/7Y\nrt+2376G7f8f+4L5bGIUwu0pxueUYGsAitVciq6f4n9Vj4QsaCnv/TD++p2K\ne/02xiSuj4cYTujZ1BYFWrJeVb19m4b0EalHOkM30UZBkNPEiOBSj/+f9v7b\nviLD\r\n=Cs7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa7MpgK2QtlX+ACP0CoDYFSfMIujw2NJbF8z2qrAeBEgIgNQy+4FohtkrosgdTiMf59/VdWWsWdkpGlCX/fU4Ze+s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.13.0_1580791588388_0.44462990537270186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/slider":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AXVp+Ywnef04O56Qe9s1WpbYHV3E0H+fWcYaLjDw5eqNpzlwWXzqLHGPITlNUedEmQvMQ2zAGwZ2Ab2IzUvoMw==","shasum":"29c800bc084ee6eeabe7d1b2b0a1f395e0849188","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":80070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHq5CRA9TVsSAnZWagAARt0P/RmHH+mGdKAC2Erchk6r\nshkh7ARjreeNkdItNGlN4dxNaMQUive3P/uICu58odRuVh1kUdZIDNjdklgr\nRo10I7TB3enSt5vjVNKSBBDn8abEhHTydGUQ3mQu22SVraVKS/hOZYLAiGt0\ni660xvr3Y1jKFy6I4Ay98VgNDFFzrC+FiHY9WMjbRhhTPKbQZSfUAPv3g3gg\ncGEP1k6GP0dvROEmWaMftixhgNmfIO695tJTD4TzwbC4mJVZ8SmvupGEiRVJ\neUhglu2fagdhDbjEjpg81Tj3D6M14WUECdzIRZz/HVHDbz52oDiLLEQJjCqp\nDlxdcdw7ojKDbSApgunzbpTymqNs+0kfmy3P8FFq7WxJBbsc6wKBTaEprhui\noVozFyUu2yigFxLqvAQyjihMRC85LYblc/AjiwlywL8GF9bB0EbkOkSvg9bU\nbUMWSzaKC2FWAjl83uOoT9Shyi3KaSKb8+OX+pcciGKP4YAjl0zzP11O/8tz\ngpiwGXV3W88AE3gtAGtl7Cyx5V++JJ+C/ALyphlbodT7X78iNUdvg555xpjn\nwmwJoNTacs3vjH90ZmrrQqqFJDepZ10A0Rmu7iwERkJKlnAZUEg3WXKZMts/\nVVFgKgWUd/lsQA+0sk4EPY77oMh7duWjaeoT4ohMA0ljZ8y0OyThaLjl03mV\nsomi\r\n=rdVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTm8/Z0+xD749v/wwABd5yO2ZOkNq85oLHBw5GqQ0+dwIgIsPqF20YY6eBBYGziEhW7EYJqOoM1Bm9LSlTW97vOds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.f790f713.0_1582856889437_0.6584954997957024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sCtfn969MZhBeLbnF28c+0yhs9TsR4+/Y3SXs0hJ1zmeyoB/ODuRKhRyagxlgSgwc5PBwFVM5L7O/wgAy7wJ0g==","shasum":"6f4b3754c455724acf7eacda7b4fc3625bae9239","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":80070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqaCRA9TVsSAnZWagAAJnsQAKEK5frns1WwlOG+z/g+\nX9QgR6pspRukZRnObwMqIcByywmKhki+JHk+wmA/p3imAG5YOXKqn73xGRfg\nGmFXRr8TRGEjHzivq7nzexbmATmDzs63EubcURWqjGvRue69Ntw2gS2MXaZA\naXEDiOSqXH9yX0F2tjN4F4UhNW8H+zBI79eGVA92CeiVAeJXTO+rYiIpmhZC\n0rEMoz9ExSxXVQogoWNTnb5xy/MTDlZ/pfkcNNGxX+5DjpEsve47u1NRsX/y\nj467ZiCOn5YQnnXoGkh9zIhaddSN4UkQGe0VD47S9Cv5tafB90SG0Ex8naLK\nrGqSvBnuUzC3cXAmuO5BJNq+egDhgOLaR7+SdI4Wd8wPZ4VDA4WZpzrFuqtU\nr7b7c7vxNSUriAUx2QaiHvyDhqvSvJKB5+Uu+LzBIuuT7qxS4+qEAPH4O6Tz\nFXr8wbGAvFJIokAz46Wj1iIe3+P3yaB0YtIs5rG+ywp7zvtNjNMsQ4wz3vlE\n7IKXPtDrZHfx0M2GSk+P4IGNltUTfL6oShrpgG2FABc47aGNnqKiIgULjPeF\nzF/l7F1yRJlGzfS49Dub4tt7CcT0K34cjXl/pYhQb6RI95HsQmv5gdbWP2yb\npbgyNbMR8QWVvRlx5qepU4IRTXXkPXRcQtgAaSANY1RNniIwLVb890ApcJms\n7Hy7\r\n=MV/S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK0kjXIJLMQLa7x2v2c34dVI/w9+SbMEhs9j1sxkwMSQIgMEXhpNEjBYjxAxKqNHW+KM+8eM+6nEBRoGO0LLywAm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.c759cfbc.0_1582934681917_0.5204068541442239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Sx9bSvXm7rWnUyvIIFGXxx0B53LwA6S0XIAiAdynwIUYc+m7dWSk/oGVOo3E868Rqkj9mk4ZPXqTQwWJatZo6w==","shasum":"8d94f63eccac340eeb53643137b349b0cde26d06","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":80070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3HCRA9TVsSAnZWagAA534P/0eQeZuE20kiTgqxhpKU\npDdIkp/TQm/rguVSLBJepaW8VmvG7TGnWgE3imDUdYWR6U6qsKFxd2c3a1MP\n1c4ZEs3qHY2N9Y6jHUvIF3r40qDGyEduXfYAzc03t/9rciIMtDCszJT29JqM\nl+u5RAPKRNMKPdzwH17LzQrDjhHbrf+mwfwA9Eb/+ElqMQEWrWtZMDap5Fin\nk6v59OLMDuKSsYDwHMmVXnk16yX2wqCV7PIYSnH7ysZCjnylIWnlt10CkPBo\nPNN+sYpTdetw8o3ftdBzgyNvOJlRfPacHKuoz+IVlf+T27iz598F5FwrhHED\nXgGi7zDXzGTZYKc1tsRPo5R6SuIy9a5j9IJyW3oog2d77EWqZrelEYtRuC/L\nnQH7jIfysGyK+BEQNFxj0LZuAUMy/WYCYmuKPNnYEN3eazoIW0BGGdE8666R\nT+f/8pb1qJ7OQUXF+o/G6a++9IdLnhgsvW7frmJQOQywX5vnHkBUxf9qfGNK\nS82uRBqJ32ZmsicHM1iv3L/6DEOQlyCjC3/lZMXptM1LfJ/cPe6RngPmHpFx\nYwhlkMlBGb4J4WGaazyRkoBjeRsp8gIgTIid4TRnjsgNz1PC3FykW4h5qplK\nTTiId3feZQi94dUrI5EeqrClIi0k9MGDk0hdSDQCE7ZZd3TpQ44e/M2NnpZp\nV2pW\r\n=eNov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL0Ep4lZwfZM9+N2cmugI4vh4IY6NZtbIQW0eZ32VkrQIgKryTPDzj8VO2xp2DvUnZ3GAM3MOwotdj9Owu7Zv61ak="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.97ef53d8.0_1582935495205_0.17073293439777593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QPkKGISWZlR2nMDAvUoVE8j73LltbvLbms0F56LHFoOjp/sF9MaMSF5IVO1Fjn7x5FXIjuDvsrcJXNwxJc2+/g==","shasum":"5cce9527d03df2901d36b77ba310a8ae0a877d51","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":80070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmWCRA9TVsSAnZWagAA5gMP/3SGdscMvNzf0FMX5k6e\nn56vpHXnJ4pegMJqrVGNvU2wen8v8lPI0dcFNKfNoW3l5XFrbXt8t1F2CLBc\nIi41dCPuJsBzlbe/reXpK8v3C7HGc6/NOQp/6Tzwa5YjW1uJqOpEmYBqAn2I\nn6ktuEVBNBf4cCyOy3DTCXUxmQf5sH5Wz2OleZ2umnXvvqh5Mg6twlTYjnEd\nveI+wXHgqarb7tqrDal7lzLCf5i34Pwce0YcVYShi3rhhS7NXqO40iajCrW7\n+FzFvC/imNOE5PghAzTGfTj2Pp5WQcQFYE4pNTjyHwICL6DoO8gSWdpd10gu\nrsC0TI7IlKIcCezailxaq4BakzCA4Bm+V7FfxEfd0wfkVh416rzo2ok7R9NK\nciq8iEnPXj11PdpxJXCSEvvYhs0KtDUpOZlU8cBb8rk8P7Dk0yy5j/wPw74j\nv3GiTw2bKW+c/W91uZR6i2WArU3ZDSdCR7dtrrhvXB6rUyDZVeeZQ1aa58n+\nTUtJiqzYcHfGjgku07vZ1pubMFQpoVNY7MVgxA0xa8dqyEkXTleTkVsVJkrS\nFmTPgcJ0K79aux/cpIgLwPx+jdPmREQg8vpnp/tuUPwWG+Gp4qS8rHGU1hlc\nOUPfRkNuyKSP7B+gGOcB6tBE47TXyrZYMgIVK6x7qYGDFnXbzFgxqCbnlgQq\ndpWx\r\n=h/Ee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/D//RDhK4xGAVqH+M5F8wc/7o4ku+Oeqn9FNqSyJE6wIhAO/BBIxkKMO7iw1G/7ehae8Dj30Gx3AAfY729WGjysqX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.24f5fa6e.0_1582938517486_0.7682316393282476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-adrqBh1npBQEQ2Ehhc5Iqa+jNBrYsRq5SkVhaaN2S1TKsg17o2QGpbIHScWkmiGLLDjhYF7L/BitpgLWPc1FdQ==","shasum":"4a56f0647d3192d6e1a4b6eee1f7d8dba34d7b48","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":80088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXICRA9TVsSAnZWagAAfv8QAIFq63W57FJmkULLlVPB\nzgviHo/cPX841HLlgfICzN2xXfNa/UtJNxH2X9cyIKku1PWEINoyB7FYl9Xy\nHKyl5ZrO/FkjSjT1UEzOGeC4XmQ3+HSp7zHjBw0q/btFRW1cy2/CPfeVZNLj\nfmTYRw0ISRIrnLTV4aiFJujVbBDgDGOr/MvqDbofbrGqdqoWo+3jP377K+GZ\n2nf+VnpFEaD1BjkTlyWYSkx+dYRPLR20nomSHXcpS+FLQ9Bsxv4irKOjjI/X\nnhBmuy0YGeyn+EXWVaEuRoo3byqoMumtkyZ1hs1ISfjeWvZOvhFK375F7Qcu\nduhXcyqiYof9bTKy5TIdyRjv7Zsp9YVohQxtUo3f6dTo4QUBS95UZgAechmW\n3Ik4PNpKFurBKj/wGA3V/QRfml2oYzbvOCR73aO+yAF5mT20TIbMB0ejhQ0g\nqK3dzIOG/4NVf3JbC77sbF4sEZ6D0QacpBk5QQZYi8vPaJU3vHYiYSYwV+WO\nQTsOrs/IaSrbmRhyTL2sMu+Gvstn6vsA9XUbZ8pS+Sg+z6mbyGylBLfIC/xE\nO/x0ZspqRuwuOJXnyhZQdE0t864fHwckGJcOfnJwWw3hO0aKEoaSY0QNHCsG\n7uruvinHo6LHyLHTNwN/Rdy9tynI0KpRi/WdgyEpuFj06wIw6pNFhXwCHJOI\nK7UJ\r\n=KZcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+yH9+nLFc+vX39pUpjOcfdqS6bgW1pIcS2b6CWAjRgAiB7NKV49XOXW2+ziMRO6QzbzL8bzkuzh6RYBFjQAceTGQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.960e214f.0_1582945736207_0.9761541902408364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2L/67Gmcgvj+oXl+RWdMJpn+Fcw11qF68W9gOC/cTnYWpMBxcEvVBnOpMSWgBKWyAcHdPYRVKeCahOsAJ/AYQw==","shasum":"6a63d1655705d79e745cfa2fc2529e1600fdfed9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXas+CRA9TVsSAnZWagAAeTAP/15XymQF+wS++2nhQFSF\nrr+ouR4nu7eSU/bZ3njL5Aj+h65wmBlVMYHqXSAnmCiMq3A9cWLpvkiwmnaC\nS5SvibHInl1hhb1jFE+4m9MT6YUJn3lT8KovWzBBr4hfjIM2lNxAZ46hc2WO\nJewRMJSqT61l0d968hMym1hktZ7A8b8Zv0bxb1yKixyc68pDBTvG7aUIz+gt\nyyedT4nfznSsr2AlBV3+uvmu7yj5ryRwQhT3B5WkN203reQ4iedqTemEY6YJ\n20shKLnpLavBKFFBLYKzqPdD2ynE8Jn6Xk/shKWwdRC1Av4zmh/lDc7kcCJ5\nAKG/+mmsKMbiaTgRfmJmWdVN0CrLO/gSAkWWCdVdArvDdovvQVsymHNxn3xX\nSdSVQmC/G9dM3PlZW3eJ/V5U2+kqXVBJX7n1hubcNnEoVO/jx0OtkTjTS0pQ\nXa5r6EtE41EOgJ5g2xdpfRO4i3QHNojRGjP52EidTla40MLOprR2zWbc1dk3\nC64PT6eljpP9WXSqVrDXB+RzkN42Z+7dnnnYlwaTn1KatnyQZBCjBpiyLYhS\np/wI6I+zETXbNF5tcdf9a+me2i0hdNmX+civppYiYvR4NAJmjx3OMiO9ULzb\nD/1DRgIQdnHs72N2QDGOvnelYV4/nJ024wTOaS0mN5OowVEzGwPfcVAUd2oS\n/z1k\r\n=4LF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGOxggbVoVS5iXq1VG5N1SjqaH/DvzH1q0rhB8SrUr4AiAqTCDDQndm5LQ4hwsTv5kJzwYmH/ed3rOH4Xzz2HQbeQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.a2f046f5.0_1583196990206_0.3766090912068163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/slider":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c1AKqwirM9pI7X7QbdbgmrncBjwKQ/JRxZBY4siwed5D+NdJgjMmJRtaqMrFRmKcdDB29119mvsNrQrZjd7qXQ==","shasum":"eec51555a5bf2128b55adc69e9c5de1452d60597","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLOCRA9TVsSAnZWagAAndsP/R6qPjBSYPa50b7m/ek8\nhvSBC7Iu5nTqDIRPFh8h2WU3Bw7qsoTG3YP20mE8zSePXa4OMGHAHDkSIDcQ\npbHTyq9YHfIUd83YOOFtx+Qmf25UwesHMmGPFhOBDndhM2ssSj4+Zt017z6+\n1PO7xAts++e6BJBw+S9H8pZIrbbWG7Ve6/W1VbsK7ppabCnbDVVJUC+zjsGJ\nICbVG4622h9WeurIwGGRRPA87pDXAyfjq+nXBvrpa42xDmD4ZN4D1LTzahnZ\nozORr9ZPTEcA5St3zC0p5Tia0vDRW/xJtoMblUzKfiAKCoFMcex1wGcJWcD1\nLqcBpP3hzTFLFxi16s8STwRITGTeVZIqoCDS1+DiZ/e5UBEUBInAX0xEZdwS\nzkcRrLbhqaFRgn6Ajn61Uwpl0nMZTedY4gLO36tmoew6GGXV0XkZ5GYDXKj6\nhfrakBRagFOBAAWFfMOaManlLPSEiQTUGm9EZuvUNOCMdBw0t5Xi5gcbAB/U\netHM9xuSN4/kxmL0ZFky4DuxxkQXXTZa4uzKjsJcA1kL0FjkB3ddY7+rNFCb\nIUvnb+m9Zp7xhYrMSTmeCw8g6M8s1CVPCfZ4cR0c15WOlAHWJ+JZaeOiBXV7\nIME2p1BgDbniUVqJsxxemWto+WDCGNF6t5B1+pW+kB/decSRbOB91N2NskAv\ntzWz\r\n=j+nl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMtjKsMm4iLdd06LX4iF8Uq1Njj/6Io5OcS4xMnEodVgIgd3oocuyTv4SP3WzD+zCQGh2i9xKnH0ah8kiPbVLo7rI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.024f371a.0_1583198926288_0.6760764627229736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/slider":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pACZf/s1qAnTeM37VHNUs3WdpZYoIHljy15OF3+pDHcVHvvbQEH/C9HFkWhVnegkE5LtvGDhMdpgSH0NpsBuHQ==","shasum":"5589e2f2248b16f798f2b49c6ed316ff2a06591d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs01CRA9TVsSAnZWagAAlzMP/REA/17vQeRl/50d0yiP\nnJwQZecZD6UDkXC+vssTx7Xlo+syVYGIsIHPhN5HCOY3OWHxuVLSMoWUMC38\nVcPR9UzZPjuWU6Irshu+DKAR7VSPxZgyqdLfWhhGsUvkXz6EHr4fJtEbHJti\nxfZ/r5q+fPhvQ0vpkT0lxJ6fUZ4zwDw8UXlBVc2cDEQLHJ1cORk5STTWl1hC\nLwkZXZjxBs/Lv7jMXVXim8I+yvttcuooCy1tkce/xNeb4uEd3HdE9vxsYoDk\nRkXskr/lrBcTssTJRsqA/hWvDlqkRiRMZjDNeVPEZlHG5mY48euTBJqOqSA1\nE2nTITlUx+Zkrn8DsEb0/BTwGf6Lv5tkljGfadHnejVxAWAIOErLF34AIuKl\n6PDk3Lybpj9zTx7XCB733MqHgYdTdvt4KmbbV8ZJT0CHJr+//EzGCwyOz7/N\n7Fjcb+DqCdDSV/ajqyi3bzxVhI6qx3648f1UYJpAWEUEjEPw2QxSEhrPnCvS\n6LdVshCd7VFjHZHe500IhUNqh4Yia8RPEJTVx0lWRqLKC42DYKIb1VlSztgh\nzwdoj3qLOy8a0wLl25crn/x6xTXnz/OWL+65olkk+ec6Glp8XatPK1yZkzx6\nJDLhc7BhsO2Ro6AUI7p8R0CQ5z6c8XJjBy0E1oIMbIze+FnAJVULIDJFAmXU\nffPk\r\n=ay/F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkMvhBv/C7ktrDzDU1qLrzcZQ//XSYlbUmYXCfpqZyeAiBo+/rc1FBK2CBxf4ypEiBx4DTYkOcCkc6ofCqF4beAnA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.2f164110.0_1583271220796_0.17094719904800781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/slider":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XvBqAiP/ZXOe8wxY/l2ZYsn6yrfyE+95P03Uqo7TyZlxqobgUWq+b1ozKPg2j0+R1o+7l/SoawPS+r5s2l9F9g==","shasum":"8da6b1a6f6d5cdcd44716f19bfb1ed300f7153f3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvH+CRA9TVsSAnZWagAAheUP/3vC2lSrmluDeakO6Bep\ne2HFh+UKk0LtKCII8dzqyBP+W+cLVOA32x96raVJDaMmdDrhwb62q5zFW2H8\n2B4WrwCjbU5GMtiZJH9qEAmuPiCVazKfYkvqXqbbnMGgmdFiArKa4R+4UuP1\nfdBDzBOp1yA2oC+GqW90g4IRQ4uG0Men89yX8HSV5iriyMOUHb9zuJmDGpBR\nSGTC4iRGd19pYX8UHdP2xCvkH5e4YjMAdP1tfOnK5XWD1/Srq3vg/M0ZkXBL\ndGP+LhgND8waGM1cXcVgq8cheYh8dhf1uwHKEtF6nfKDwDA6mo7QeYw8vtfV\ncQPBuMgotqH7j5iQvvLl1shTZgykUEWzNTuw4a+LekQTCNM5OsG4ktdVt41l\nQcZTZmhquA/vpoaPH9JBUjKsh4CMDGIDTuALwAIK2VzJs0Yv4l2VVRxmOe7+\neabTr4S2edftM6Dghtp4yuCDhIzEV4elWNdTlC7x6W+XmT8zCazfqRLvxE8b\n/gAy0/FDwQWHXQRCBGVRznhGkcVnqpHh+mkmNPkAM+ypYSJn+Y53R2k9mJHi\nqavWtELSnBf2VomVSpS+MW2tYVV9dLlQPwlSqRy7Mpd/oAnM1B52mlNzPugk\nlDp1UJj0GEuu8buymP9ovB6Sj+yNxtcHa7Khb7Ytw0RM1ZIIILbuchAbY/7i\nY7iI\r\n=l+Fp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICs7KgKCvM7YL5xXvIJv9dfP1DBHk+Fah+mgNFGCHRKMAiEAqcBblcuFZc0tth1aAvDK5GzNTydF5ggER5yfrIIykRo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.edd465cd.0_1583280638142_0.16426218280868343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/slider":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ojRwZMXOBYCNXfm/YIIuCxedNoU6LO3En0X3lBGFp44mxKvvU2Y0nArH1D366kjWOzfPuGDS5IlWg9LVG/RfVw==","shasum":"785e0f99a0e4abf2e443a6abb35eeb015d369cc4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA02CRA9TVsSAnZWagAApGcP+QCttJDVztXGNvOtlI/d\nbMqWz0fKhS6wMauFPV4GKk9SrXv9d2gDRMVZu5Zbah/WAyZetkBabga4BSTn\nXqKCiZV0U4F3258EbHg0pjEpBpo3d/72yKQFl9SAet7zTh3HpfH+bLH8Co1+\nZ2FakyYvhf61GZHY7EQNR/Exb8jJifUnpQNHkkHXcKPGiqvTDw5BPRzT0f7f\n4gv2c9miKrdtqQ+jqDN9Hps5OtFrtazFm0am0UnMDMlq2z3k1MfM6OgkHXRX\nmjJFj4T19LITgFmr61+heRxQEh1u3+PL+tDJFlGFK4byydDfVh72zrmQnvcV\nsMnIUB4WcCQm6NLg1NXCgjVrfPmumI+DUd7yP+WI0ei1QcNw21HwFZ9OV3qz\npBQoKki/WJrDy4vlBrmSRsBj06eJ5Sulb4ZVj+8kQJ5VY8XC0n2APYuXXag0\nDHGmkQB2uWbPgVhLCUT0rA4909YTCOBL+02dJVJPf65VhWRLOgeGtmKsHJIW\nwrkBN/TLzjEcnGH03jgoPcyMQPGC2TL+OqfEnusbVe6bLDDo6bz20ImMaxr9\nftnottRtDaFU+xHvC2CoFVBCI52p1zCfVEKBmRdH2KCiaQtrOAIIIbG/YSnn\nUHWcCK7lmGQ7cttay2Tr3In1bjkp23b4t6JvgbI22TZXI6A+jJtfZ0EtzIRE\nKjYU\r\n=9HuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRKyNRvUWEl0/kpSgFfuG8pHwaB4ywJzaYjNq4YuGmvAiAswztASFd0IO8svpvsYmLtWvVt9lZHq0kjBWHmphaNWg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.2b02d017.0_1583353142004_0.02138459417786054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/slider":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3oulPGAtIegMHO0900+EQY/BK3EYNMu78BmOHdb+yPN9We5xfz/i3KC0wKNmkyGTIJYYUTiIe2iSuDWR64FIsQ==","shasum":"fa216e79d6ac7f3e9a63cebe83384c0a067d7336","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCE7CRA9TVsSAnZWagAAfbIQAJQ9pGxWl0UYo94hr8kE\n7kzZte6tirAFheqjYvHyTkKDt91nj1rwHxsMnw650xvFP9iw989vujS/yR7U\n2ABW/kxZGpe0BVo9bxDeP5WqlvVARLxAQ47ZDafHB2ZbLknEFMeeFbZy+Nlc\nOsgQnotBw7v9yO7tPwlpq83gLe5QoD2lF6blAha7MgCTB4xICBFNXqB20Deg\nEjYxPmq1yg/B3WiM44NaTl3xAmUqldzLCEqrzNkuqm0ibozgk2/wZpcdmn2O\n4UZUui2ZMKYdWs/MXPzf8H1mtWHXYa8kGrBqXZEhcx87GmG1U38TEWfwPq3v\nthroOuHHWhXABoF7SBDwlqQJsOC7n3und1ujmUf7+boowJSnfnsoqv4elhBb\nVP5DusggJhQxrcXbHrvkdiSi8eH3316K+laIAvJOdZpTugJQQBoURZ8+pmuM\nyp4EkyqS0UbxRMecUoxTaMwNy+nGkTn1tu8PdjBBOwfN1qWzgcWz/HxnHmKM\n4Vq/UtsqxGkXT6GhcA/NYYVUBierA62tDk2GS8k5ssrooAc3pkilfbaob0Rf\nI0wkAtxQcoanDlp/5JlfN/bzlFSGubg+N0JcIL7bpG+Ebmu11J66hVhfq7rS\nptjpWi0TpD1IuVIkO+fRy1cihzBc+Yua7i189m3Vltn/cVjLA7zeAWXTJsXM\nWwqC\r\n=eXNt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH1LOsCK1TkpyhrWqp9XgZMbNlfukJxTS0p/UiHRTqvQIgMO+u6iVnw3TmQ1asT0HIUYWrAXSYTPbRqf0G3i7Eohk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.cbdfe453.0_1583358266792_0.7265751888345418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/slider":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0QWSDplXjo+dD/LnSX1knxpNFQ+qp4xPXg0qmFgzbTl00Ix+/D2k8v+9nU8P+abwrBHNFzrrsxmWFNMV1TnjZA==","shasum":"8eeb1a6fd51194ec0103cd79199adb514c77525b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtReCRA9TVsSAnZWagAA3Q0P/3OshgTg/JKiBWyLVmW4\nyTcMCVPIxqOLA7uJUQ3j7urAZRDJ9CVVsC/RyhNgjG1ARGhqzvVRKesAtcTZ\nVhp1PkXn+LhRChya5p11xgyvm4QnStTd49Hg1FftC+BHFOPibFFUKm8TQ92K\nQRdSApt+rhpHgn5u/1strTjtrkYRjP7dkdqaFLwaaG5Q30PyeXz2jCrzGglr\n9ZajE4qNTTYIlrhH74azzHYi0qHrSndH4zdLXq3w8D5C284s7QiTcf8mQIUL\n6T4OLen/Z5/cLooRl49vkIA8uIin7KVHnwqazPZDxxYNGhJzbfFyldrAQ+ig\nVG9feBWdfXt+zBW/s50SS5i+7BUBZpr9zYO5w5qcHloU77p2Cuuzou2XC0y0\n//aF+8zVP2lFnZaN7vjdGGlB4V/XtIozhAOrVJmqIbgixKyXcSH0VTtUMKGX\n3JphAGR1t2J1PXS0ZrCGvPXtzp5ZgB6anyOzwuSNQTEQdJX5PQgMV+9LhW2y\ngUjijVM+AhXk1y+Bja5KE5sSPTDzPiZDrhbg7D9cp7oeotUlFLB5EqGRLobJ\nTKy0QMKXD6/wdoGarinQW0OUXWWmmRZNCG90IPFd5wWbSzg+jQPfC+cRv624\nydmXIa861uJ7ZiGPOyLB9Jt03UKRniqlqmPkRsflDCGMpwFFWe8Jdx5M76ds\nTgKT\r\n=LG4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGe/bGP5WTu3q+UdoI3q+Lfsw2Jl7hwYE3ADGnr7WiQaAiEAzwp/AM7OWXMhQR0/5SqVE7/6VYi5ObvF/w2QrsKTKZM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.02aa8a98.0_1583535197909_0.21499265312300087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/slider":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3XIeW3iP/OrdDZThsfyXyOTZFl/Ct1OfGv4bKTs+MlaZDLtwhmST3tfYCvAfpKbJiHBDy4vqt4KNN0ZvlUQyPA==","shasum":"d883c18b3a18446bfacbec7c3bd34b178dcac5ee","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8jCRA9TVsSAnZWagAAt70QAIT0YcqM9bNcNH5FRtg1\nba332Kf4zJz21UyPWjUaPfMRJQVvmI33A25b6XPLJlK7iTijcly1Cq7UqqNO\nBLn5iVqzwsRbvbEtwz7CKGuBN6XJtIQGPyIPZwwDuJrB7bkWqPonk/1hPyd2\nBU5ZGp3KX7MxSi8Ea0uKyc9dxNwcNRHXnytiSHVYEcLZRxiLeYDA92J37qGX\nEHaH3j/4gRJwl7t1SZwTJ6JwaMokBQ0EU9o3qiCi9fdkorA0I4gQtNZxxzQ5\nK4Y2mPA1jFF4cvSCeYZcKMCZ/bNxtQD65VBpKFl1CwdBCayfcQ+v99RUuXtA\nHRxRAsPH0M758kRe27Js+z6IsC5v0H/hM/X9kcRIHZUt6kluu9lKDYo6QuyW\nTJS9mGqH2JRvmlKkPia+JoR27Gfh5IxQXhpOyZZAlNkH14g3LzzJYXsV2KJ9\nQjATTOLT7XbkWkDVkK2VexnQBjpv0RZCjEgn+qrFbK3zotNyJnEd5e4nteMd\nVr3v+0H1CKwbFwJT2si7oHUZLYUWbNfWIvb5vwXeZasWTMbmbZ1Skz/SWaMx\nhKM0q3JKd6JhTd9Pt13AfEB0SXlNPrIi7z5Wy6B2huNJSHvAk3eF32XcnwIq\n48SItMRsY/ejjhBMhmpO4yD6f+0J2fRa9Pgkuq3Tz1QdGxpor+NAnz6jSlMn\n0u3r\r\n=6agU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH/Xx85GfdTZOKwGQbW1MtNygsU/Ep6Xhi8jW0ZCHaIQIhAJBhcthUdBqJIfwUNLWZEqM7mD4G1cIrCIF/LRkmsHWy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.7cd5aad6.0_1583796003230_0.13068543275058797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/slider":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lUwZ5OpjpCV0USdVbJPU1HLJENjuWhfNi0skhluAb+//NfsOzxsxeYBR7dU+bQ1EZYHibJomVkhwxZAKvWAFTQ==","shasum":"20581bcfd2646cc862e28c52696f06750b942417","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHDCRA9TVsSAnZWagAAWDYP/jZDYP4dydEyuLKucghn\nUVejJO2SBExInMbI16lfs29j1MViQCM2Kng2jpbvjnG4a5DyBBqScMPYbgdZ\n67gcdmEn3ZMeKVcPbBHB/MUJpTANQou5sn7g1c2VEaEv1XqZtsfeUxkZW1zS\nGBtGB3tAPEoJRr+bjcIp11em1TBSbhtThTe6+P1pV9j95vhZhR9Y9a6yC9Wr\neVddiTxjDOzfDtPtCxtf9g1m9NbvamjnvVcrGMuoz3weOuHZlrirjC6u5lox\nb8sszWFOi6eoWVm+x4zjbCmJK2ksYpe7HIDnfh9UJo8T1Ya4HQ/X9mjr2Z0a\nPKzFn6iSnnoAznFUhFj7hoBYLIa0pSOVnfYRw+TtyBMR8LGS4VBcJV6z3spe\ni/Sf09VbxBoKnC/1yXFVNML3ZjVCliGZviIw5OJ36UvYBp1WkJ5uc6ENpWUm\n5wMOhbYjBvfPNLwk4nu9ur52rabbouxJc3xxASvQrruiATBl3VG26A5HxWmF\n2WZfyNiU/N4f6hSw8nfQuCShUTbPVwW42qqCPhYepgjnapzzf7DGQALAkIob\nI42Z/8F+8BwP6tcShkIPuvj8buUzDuaCtdYt4c5og7S1f3qF51+hOjdh1lTe\nXV9R7OuAcXT7L+Q+HSsoB4Tf30p8uFbddwxR1Z5+PeNT/z1HpXYcz7WRmm7G\nGsBH\r\n=nHZT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkWcicZrkljVfL8KlpfYueYZfVmE6BgVuycerRU2/11AIhAOK9NDpbLB0ZC3J/pOB9SxSVODe5Gh3Z6umb901yCmfO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.3a79dfa6.0_1583808962833_0.2583970744854085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/slider":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-z021nQx7oBbtr9XasbH8/9hxr9hqEHtPyTjkv1D33Su5d1IfYsgkHS0HNQ3aCRbu6C7PB/6c4fiEr7rB8y9wWA==","shasum":"8393c0d5a7b624e200753cb35f370974f2385144","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwK2CRA9TVsSAnZWagAAL7YP/1qLy/TWUthOCqe4eMAw\nXwGZWe7IsXRtWbMUDbvuj6YkVIyfj0WUO3AAp19hiQtLju7DWz2yVlgeVDW2\nodvJThPPtDFVXKEZewVfawIbZQHQkCucl3u7rMyRnCTkiOENGyLxl8ENvsBo\ngOBQmRQpTWH4eSCQwQghM1puhwkBQ0PUVJ5MjN4+geCNQ5FTMVPhBQrhFlue\nOwQHvKDj+sRDcKFV5GliBUP6yIHNEHHj72AN+y5GeB1i8eDxCwVjOHa+vxeG\ny6WmKiYIekSmhqRv4slM5ENfLc5XLmG8pUG8qabmcSWJI+Hs7Tff1jN5AbNb\nh2rzspIuzm3tOOKn+hNzG5IkwACSM4N1qnrBga6mHZpXS7OLlQomdoFquHhV\nNnK9426xsU+LfErlpmC6qUt7Dg9LEQ9OEoDC7qxNI8+SfFLNrvxTvhI2xfLz\npfLKwGuMqiulnPDR8whqnL1aV6xs2Wqt4+JhHbNw9XjVWmMWi2xdbwFxr/6G\nq66iUIs8LEAk/u2ydhs1AA8Nim44lCtNMGcFjqhuGJH8pn2vVDWLmhYqrfDZ\nObsUR88bu1xegLoMneUoj5b8EVSlBeeheNVvXkVZxoIE/YDj3ApKD/Y0SXL7\nzaVBQCVGzCgOYuEoHGRlkd4WMJ2e35osjq7cHDzzP0/b1m/jRZBJRQrfonuK\ned0J\r\n=b5Ty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX2giyjvuqodljNjE8w10lC3WeJHS6e2Kw1ZHI6Ug4XQIgcHe/uoUecK/ceVpLqOHhck2V5+DHJZVtBqO81jnuDCQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.22e0f5c9.0_1583809206456_0.9816766853827645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/slider":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rZbi+vlPGmIW0T2qxS/w0H9lQfj151p7JE1d30m65MTrgNoEsqTBxGUL1luTjkx+NkVqFqfWZoutyjzVKG7OZA==","shasum":"bf9a1606d4b085a165a92c312eae5eb8cabc168c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/76CRA9TVsSAnZWagAAiZgP/2595xkCHzZe7hSZX4ed\nu9L4fdybDTKOSumoqDGMhPgjrwcm/VyJ+EZZ+CzEOsCNncClStQI3ARS8k0F\nGCiVT7w9WELQM9wWE6fO0+TQ5+7hye/PFIFuw72gbAcjtbBAX+6BCZ2AHrJh\nouVfKdWyH8/NmRk8wy6HyRHQrvBkP1cWcyVohqJdngmSCbF2+7rRlywr5bGm\na8WeGsJzqY1luCSfUwOsEKjX8LCwdv4s34tzkbSHfAATL752P+xKXzjUd/L6\n9WtFDYhL4UV1lYzWkmYhkh+6CIiBTMcm8NuuuAH6yvXtfVHixJBXlTaATw9p\nGtTCSXY983V9bD0AvX0+XU5WZn3OMQI874AEp3KzAkdEIuRfR5bpYu6RGorx\ne9qqNHssUNCQf2QhoTJpKMgZFKbO+DI0TLs7Dx1RESQAr8SANxkXLi5AztGO\nB8M4Wpx66+TT0iATo891e01ILHxf7CGLSbDQsXmONvRhOCrm13oeSE5EJf4Q\nPTkhnnuB93ZO31P7hfZ7QGq/sMrNFxVX+6z5/Z+2hN/UgZ+4zApOBDkZIORQ\nNfBm3Z20gdUQb4Z9SFLSaShqzx4CP8cnftXjFhOK+3PiHLOuzX/12Zc007Q0\n6Kg76sgKlpwnT+E6Njtxz7G0HkYAMs7NSZ2X8aPZP/51fC8IUpGzDnnuMdQa\n/ibT\r\n=WLxf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdRmiY2F26bWtGyVB0tFrpbI4NlHDS9NijhDkT+Kj/KQIgHa2qJvUEuQqOb6p9urp6KlD3NOWCODhx+pW/gPE1DQQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.f23a1d1b.0_1583873786130_0.43424067281742884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/slider":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BRb0h4PGYX6yawyDDwPHDQR/sVNCb0LiMTBvlw5hOmICOAZVFiKbUU5G9dAYMhi6PG3F0x8SMDzJSWZalm6xPQ==","shasum":"a4283e98ab7fc1d2d1ff9a7262ce73a17ed92d2d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaAM+CRA9TVsSAnZWagAAuesP/07VHyjZS2MnEslsR1DY\nQYOZpGyfOkEK447rRpcW7WN3HW46UD2EaKQzMFxvpaKUR767x23OoAeWCJJo\nYekTLHH7Nk1PTkMuBzBhOJA3muMG0o+ZEB9280ybH9K9ZaW4xey8apb9/2Y9\nI34k42rCpKERjwj7CKbmrG22ub5+mehZUEVi6wQLHks7IO1qT0uo5ZnmsXmo\n5OGhrl5buogYorvAg2593Ze90m4D50mWsZ8/juxj9uRVztlN5uV90RuO270g\nQpcCpkicrdghBHgWxm7gw4qUCNtty1H45cWYPU8JbMGidfpD0qQ4fDzCrFls\nlLyhpAvoyrsKFtLfYMx67iWI7Z+MQcP8Ji+Yc4lz0Zeq3H5mwU59nl3Xigaz\nxd5WSi4pIKwUeAPRApaLzG/JLxIbcY287Lx6TH1iwu3MKFjNxb530U85H7xN\nGBg+xYWKGs9Bq75s9m5omCQSQSm5rrL+pHX2NLtB4vU5xXqqh4A/ZuVmiUv/\nFJyLOv8791yPD287TZMxP9vYlwdmO5nLBl2F3zDGh1toz21VIqfkNAf7+zCu\nZN1u/evXX+AJ7zfyb63BIng1KnAfav5ChV9yvDqYs6JMbMVC74+JyPhYGvQ9\nBpa/PSv3YgaTc8mLnNBwLmiPbcMHPAOYaYmz0F3teHok6dpJmS1bLHmrMAM2\nP9NQ\r\n=lUWc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyGGPUCdEV5kN3FqhJkHX9ixHFEGZfV0S67mulSyUOkQIgAdyvouKyoxQg3ceoUn/aI0VEyA8cAKNLsyjcdRioyis="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.34b2d69a.0_1583874877645_0.9369047021356667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/slider":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c/mSVFlIb+3NOLlTnYXvAFNZng7kmRSO6afKYUXOdke9nbZW3WmVwLQRsaNmoaPZb5YQTBZNnOO/2F0/uLNo9g==","shasum":"955c9e80574ca1b2287cfbf792982f0ca446c9fd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5hCRA9TVsSAnZWagAAk4MP/iBzcRuiYGPz623XZMno\n5LYHZlcjSys/r7IymVQH0DXft9GYoDDgpwPe8gk6+2LmkkwsaSS8VonNlfC4\nGfWlZ9gLqV6c/xwsMnAcwB+jOxiYvn41Z6kjZHfvRSqQJ2R4YycvoP+/ez7D\n613nF1HiB09QYw4DpfyZ54RJNnUe1bE+9FCnm99X2/prQzBaZraeKQrsOxs1\ny2dkAbUHJ10ZwGbgTmneF+VyDl/ZQwIqvrbC5wd1SDkLr62h2CIgREV2aXFv\n+qFvwMfLq8t1MsIHWBxELrg657qS0hSL5FA8/w9cPokBLQMp/FWkb4hnO3Sy\niK01BBC8IHTuXzD0HF6tRxSMA1fwluq+qsMHWqwuhu5T+lr5plqNvSElpzgi\nvu1LoLEj10uxdO0XEHKX5hOsC+w8pT9TL5ESFTnxq3679K9bvjsX/1ChAGlz\nOa2dfuxRhbv9ZJI+nHA6bVaxaIPnySCDBks6MEDJLbyNmMRFOcmGJpMHyDjZ\nfXYQXWt2w29SCmbAmYWsdcYhaKvJaVFr/RASrxgJJaKTltnul2STELx+iwJJ\nj8/bFMspV2zyFnpcBFdH181EyKJSymxRT0FWpytoefJ6+bEZPsiWyDv7NEk2\nkZ+VjasgfBetgt7Gitdz2nW/9vXnq8Y4YKHywbz4j3rt/7IJXoCuldEgdGUm\nvTJs\r\n=oLGc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETu5Dmtr5usWbuehdYnlSUsBT5tOG8HmP5NHp7G6dcEAiEAh2lHER3Rt5GtrYh6TOCYpZRoxGmXCOaA8ybR6kwpcHk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.dc04abe1.0_1583877729202_0.32425219419396467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/slider":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-V2z1F7I2qvJpSq2KpJ0YRjA/I3VaFjCen1/G7IYOm0eGa9wc+Z0sc9g6TM9HGblzJSSC6tblxXH5XFzx4uMWNQ==","shasum":"6424ed14c1ba914ca78cd48080d241491188524c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDInCRA9TVsSAnZWagAA6OsP/2Bt1W103k/x+alZsMzq\nVbc7d19flDw0ihT1n4lr7dHuiAtUK1yTHmV6RX0gNaaLu/HNdyPurQiDLcDV\nyJz9HnGRyJzlwQF8WSXsPWMLfSWEdgAsZw8Hk2C32wp1m7whxUv4zsf13qCg\nX0yt7Eov9vj4GTfNtR+nZgNKPlbt8vxLvrWcfjIjCE5ZQqeZG13Wl4OSJu6f\nv5hRaIOpVS2nYcVbEwNMxQix/T6wq87ODjVpSiApi2CNKnFyc3hPpVg+QEu2\neXp4rnI700OzRCBTj7YF/zeah4eoJQkkrGkIykejUDa/FQM/GvESjU9XKhvQ\nfff9k8wu8KEWFwl9OzUECNfZg2fUgp75R+OrmBiOw24Qe66XibGp+Pft9lN5\nRuIWiXUX3CtVirs5lEcwaNY4XCaHDg3CNAiKYeTj7xnjQMGTPsVyZg9T7R5R\nXYB8IpLFLhFUbA/cdjejDJQMHddJZ2AK7l9TRb43tPD7cNDFakfnU6d+WXA/\nIp6HLslKnOknuV/6YVGaJ8nvjuCYDHDi0Y5FycCYBzIXuZKJUrD/XXrmr6pl\nvnqiavtKylBGCdJvwvp213LkFMOKXm3QCGw9rOMnS6/z+kOJL5UHdwJO27Ev\n1CPgXTQ4A4wSUGSsOy7wsOQAunBH+wBYjoV79T/K2a8Ch0y199IbC+dkKSAV\npfHk\r\n=1lVd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6zBW97mSqIyL2BnsFHwGtsIel9pHuXXfpZJmhA2B9EAiEAlp+T+kBvIdBOfXNQay2Cx/bsWOPzpfN9942XXVYLYiY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.04ccbc88.0_1583886887325_0.3377900158423002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/slider":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mnaZLFnT5UE/UgkoKcSGPXbcKqU9gkkamnQ2IAi2q9mZ21PuBQTMpVThSC99g4QgybAhUro6hDc2nLgr/+5Ygw==","shasum":"aae59341b46f94dadd948420739a16e56ccf2545","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIW5CRA9TVsSAnZWagAAPIwP/3yF1g5HW8bwzq6LYghS\n8TGDzqiN740dJ3OsnGfFvV/yn7IRYc6XTSQXZhkhfCi1LMhPIuBloVvp0lAE\nmK8TzugqVhxObKGXxIrmyHsYo+lLivBtH8suD/DavyV/E9BaY7p7HJn1Qr9o\nGmavmxfm8VawN8nFWxmhPUNpHi74osA2zmSvL2VaI2TXUsvREEo/9OBAt/2T\nGD+5dA9LmNqVpTjEXjug0FdOQFVwx2yZDocSQgqUFZvLDPxRlTiJueP0s8Ki\novXCXUgoIc0HLTBsPbn7BOx+UCuq7y4/6Ef6zYmEa9F3KjeCOIF42iYd2LPo\nHsNpKvOQHXq4275qX5B1iSBIy2wOuZsR9rL8/HOgZz3FfH9ZxcuCvaJK619Q\nizvHaIMMpm2ucgYzByUyTEzXwvjkCXvxbw1jdvxXLmdMPaobZRUsTSHrhsnx\n2/1CI4zcViOUWQI2TM5PUqwlDOeeKA0iqOxpCj6d8DR3H/kGGMtO25k7iHuk\nKSKXmxcTqWcArmuQaKSR4UQ9LGWtRZyxS6BkayNDggjR4xQdE5yAjbee/r0e\nKG7wyS7oR+cuiioFO6G2kuWnfozLozqg9B4upXFPyauBN/yE/sCWVkL4bpmI\ngPJqSKZcGl5A1EP/1h0iWC8qOTINcaFhAoO+XeItDE0S32qIkE3BVduE7idN\n4X6u\r\n=25e4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5wWkXTiqGHPE+RDjTFe0pn7jcpocTZij1g4QaC8qahAIhALsSHSaTTzAPUnwVN0dKiBae69V68GMW9YO9hGuksBUY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.55338c25.0_1583908281077_0.5498072016741304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/slider":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yck53xC4Zm2kB9j4U9n83u1dsrpsI/492T1yXpZU39k8A6pD26L4DMWFBac3oywAyohrsTBDQyjMN9cq4Snq0g==","shasum":"ed14f288fe85775f820593c6dfd22bea3805ead3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfaCRA9TVsSAnZWagAAQ90QAIFpbYpHkpaG9aftsDod\nqHhoCFdcljUzDpqlghsJ4dSST10EaJ0v55zNRYWUigLLmNwpKRlfOiP5n8h2\no4WfWG0l9KoVAVtj8E28hrUO5pe8E8su82UkkIgXE0ZiQGpRs8coh/chBlHi\n7CvPnVuCmwTxaxOk9Tf4Fg/uLQm5N0h7guUhkHCu+PivJ/hjg4CqpQ3ritD2\ntXd5RYYkzvpG5I+WdABXgWUGEc3v2wifa8/S2XVmMyQe0MtF7+CMWXG6mmfZ\nUJ3ddHZw0uZyGmO9d1k7rAvQjMIzJx1HxOLCna2iQQoVGHCLT3hgafagzNRA\nwvR9Ry1VSLk52W56I6S9EgZGvP/8Rn2hBN0tRQZf2GVpjDddwM/qelyE8w+Q\nPM5zXCO8BCZ9ZA7xZk72jz47u5TNLCh2Guoo7hZl2sryr5k1KpRkv/hzKQNm\nWmO07p33+iNW60M/u5/LC9a9UN/Ih60CzNpiEzl75qsOQh87krUtIjzqCxav\nSvwh45IIbnL10YQBmEC2JBfDks5qGmlzH7C/fwfSg8aU4sTwtFHrXmtnKk3M\nAfZS4Recy4uyy/BxtcN7oBXAzBkF9V4YcauCV4KvvlBHOxPNLOI1H8Ir/RkZ\nCh/8XHyCE9bj9uSTSOGibMGW1DkqD9P5MYgAgBfFgjv+nUQR30yXROx2yXMk\nMGQ5\r\n=WeAm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVYtsHQ5KRs5hEEr3tTe4AG4dLl0bxUKAlR5UIalpVzQIhAItp3axJxdLywohE7/DpGjySq+1UJNhOxxOrX/7K5ymv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.b7e388f3.0_1583957978102_0.7626122510547644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/slider":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vyC56DoRwEqG2VPiq2jfE9JaQaK6alHlrv5mxuIf/WPdjyXeYf6XPDM4Wy/jUWHxlfyZkmDXFZf47spI7H7+3g==","shasum":"275b0a5572ce71a3d043901964c4c8a20ef3949a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjVCRA9TVsSAnZWagAA2AoQAKHX0M5NQOnn/Ji4+BuL\n4w8cCYqLbR8XKJFm2dLwxyWor7wNVTB5I7yXkri8sgruxwaOZ3xryRWD4zqQ\ne8zM3SlkQdSAp9zcCvQRrMdix1li+e6q06YUffMHJdfAwXUo7SpWxeXrXvz7\nwacgY1LwnIqU2zvtIBeN9Ooz1o2IWPDNvovJgEg2dkbvS0GKXbTi9b4tA6tN\nDWo5J+xqX6tyh4Z5HEdJGx0+O0evt8J2nLX6DyC5n7dwvYMbLLSmtPOoZr2h\nkSusuRITHK7dMDpS/ireluMwfrXIU1sajjC0Zf8iGWNhZyNHAasRheQ58kzX\n3vWn5bxFf3+KRbrcK1sqdB4UpXZqsZ9SEuoRPupIHBo5pNpAQAMZO2Jwidak\nh3N84oZdz2iO+TvnBqLGOBW0+HeUSf51hcCn5XLAWKIYvnV4U+clWcWWLaYP\nt32nZUBL7LjmObMA15v4L5ajGD27DDdws1A0QqP3oYJErJUw6V04SX9css4v\niY4BbZ0/yCl89cNdT2SxU54XgQI6r02pa8jG14HxpyotzJ7ZR8xu660knNnJ\nnAe1YxjbYJiVUEYShqxAlAa1YFIUK5lz5zJqQsqPuTovVmvHJssLTKV2a//H\np6P9JGbAvrgNZDRaurDOd+gHrcnlX9qraFxjiXO0f2MFNIglPgH4EyaytoGJ\nI9Nh\r\n=xzrf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRPFfIxGBtN2xbglE2f+UXkJL0I2yOMHRXHp0gJD4k+gIhAK0fV6euYZlu6sKfMWvwcKcdzvzl2dPs6WDMptDjxBLK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.b3211481.0_1583958228915_0.5744635337960318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/slider":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DpUBISFvQh+VkqooQ+DLH0AnGohxqEpANKOGCGLQeWGLp+CjjZYXxRex+aUkMdyoNMjz4UlcGZrtIpVQ0s4Q9g==","shasum":"c6b347185008b53b5e2d901a4a4c730b352b1344","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3lCRA9TVsSAnZWagAAlFsP+wV3klFJQeJvRxSeR2dU\nTmHh5/+SNNjDRfx1qQtU4QJG8gifge2YYOTdMkRUa8acGtAtLL1l2z5TH1np\nbOwlDb4yB7WjQtX/Jtk9x5ckAwkcawg972KQz/mz+yacY1Cq849b2vdEijBS\nGGmz99N/SVIY4SPftmiBh2eyy/5G7WhI79Lg1YS26tW7n3Lch/AjLv7haeov\n7LKgEXfvXq6NXuBFH7KH8xBmqsSXzQTTGAm3HW9vcdtl1eOVJjJvUpRBsX/d\nrscvnJUE690Ii5mg/Vj6jI0c4bkQsJvZWZdw0O5VJrSR5TS2peJYC2Bp6Rr3\nJCFSThHQ0AoupkptrW8k36Ct0N3eD44hhMv0zb3x2WKwjCufQgyToXPbeXtY\nhR8zp8rV/GuxdUw0f6ZbC6IBzZuQHESGioposX8KVT1iyp2b2pZv+xavcH76\nwCOUBPDvWRScBIS39qQ+g1plSx+MWIOFSodj0WBtohqKH5KYwqIHkd+f1r8k\n25X/yK7xiwtt6PQmjHV0jSeSTCKJNv9tu7AibXHqfi27Cbe5yq5qtZhckKA7\nTwZhEm2zz44rS9NAATOZeLq8SQKTraQsI5t1v/6PU6At8tNL/nqQK8zixc5W\nLwgWGc2p7Yc1vukV88proDEd7y5Zf8q+PdsvoRIypdQBzzFzK1MeiqPLmhl+\nCoIq\r\n=PGsr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvQL/xUe4b4CZty3NsWlhBuzCxdxNlXQHXvqvxhAECuQIhAMBTiRUvSRaOKd/4nwOYQQocJ7Bhb3xlnouMP68dfnZ6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.0b5c7f23.0_1583963620786_0.43965205828336495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/slider":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-E9vBZjyURg8cUc75BZvH9DJ/geFd1jmSvYu+koecl3bino72yCZQt87a7hlyy/LmakpxOhnI41VLiBVhFiyLDQ==","shasum":"6fb51a64d7379b780e7fe26d3ba35ca590ce6f80","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbKCRA9TVsSAnZWagAAmdgP/Rs+Gdw1oxIJ6LIAvgi1\noFUn9R0MGdAkW43XG5oTMoNj/kh7uLkQCenghEwrw4cu/gOwsJ9GytWoO8ac\ncGwSieadf1TDGiNp+U5IsoN/jKM/pwJS0rvjyEgoyOBifEWET+BLebe2vx9j\nBgnpD6aW3drEt9DI789xiheplK+oeQxn/xQczQNjiUHbtwO1VLo2lDkU57et\nqqIDSFq3GxdPoqJ/LlGI/y+wIJoA7GP0wC4KoqDX1BhDnqJaxTc+USZ0ru9/\nlivN7JR58BrTHmQ0zbOxJ8jtmw0WzdIQMId/hvfNf272Pfhy4SEGUnJ8qpsD\nnhEfDZAat78cEhVijwKo9nEow6mEnjN4dywBfuFa1xjwQ94C5KSidTNLxEja\nup2HvfSF0n1UN2GQtqQaZwpPMhMWN8xDO8i+CcbIVvAdyz466yftwT90Zvns\no38VskZX973LSAkWlq4sn7CC6EHxvnzld7O7Gbpts9ZF5OriAO6KFN8ZUkIT\nTXmdYN4tEVmqW1afhdsEduLB5K12QPxUxHjiJyuL/CTb39ZVMWMJfOie5P0P\nBuJrjXJpFlEzHwGnnDY4xK20Cnjiwucv+i/lL8Xi3yCRE9qSArM1wyd0Eus1\nNBIzwOOjT8OSlBVpnS6dlix/NmmM0WW3LpqZdK7SyYAl2kNQgORwqzDT62IK\nC1Tl\r\n=lY8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWmmw5dC6va2vkQlqx5jQdTodQmBxUVgpVkElDofJ5QAIhAJVf8FaFJDC92Ga0ZxjjJEMAN92D4Dd+KrjbpD69KJb/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.6c0f0b27.0_1584047817347_0.22660489840328735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/slider":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5XRu5Up93c8XXG+q9Zn6m/U042MoprSJSuZ2lmZwR/ZBnZL21iAzb6XKgxxtL/aslwTzcV2RRO/jXJz97REWtA==","shasum":"fb984181f20349a18e5c7f57e511308ff1e02148","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":80079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7rxCRA9TVsSAnZWagAAuD0P/2ajb7oCrYp9aC743aiF\n7EdF6W/oy+3kkq0wE51CRwb/SKJ14xfj0vXLVSSbvOAVifU3t5uT5KGcMwqz\nqS1gYBfLi+OlPUUp6nsL+qE+OVw5ZjdAD4u0ymIRJ8dIDkXekID2l/wsk/E7\nB5HLUfTioSacKHwHnHUy8Ugask5uYr+AumgUh/awqNRwwjBR7yi2+W76CVbe\nAnwz8+sym1Um9zbhDZDrkloAnlTD0F/ouJORvWwtIjz0I1Q/QM8bDMO1D/qL\nmRQSx16eAtoUBnlYY83x3esKKKpAH6UXznx6Epv2ptMvMGg2ROQm9grmUJyH\nGSM1GNCU9m0Vls3oJJnhB4S5mA20SFl3jVT9deV+m23Yv+e5+ELjAmaWwIBV\nX2nfGqZUEs0ZYF6gSzV2RE8o8wg6Fw8q7uReH1W4mM6yKKBQ/wcHGeYkHYCZ\nr75e0iE9tMDqkfXjpVDavaXpIuVj4amCeI6qBloHS9XVxQf0+Ha0TShLKx3q\npPyfFkehpLDVo6An7uRqOUCKx8bpjNpGkQusr/ojxOGQ1yKB/vTK9CFdbbtJ\n4Xx4OaD+ub2Ixc7XCoESlDVOEcuikiqMlvYM4Bf22h3j92cANwSN8s1Ez3ma\nn0M9Q04Xqy0EcisTX/crdFUMqRhJpVYy5tnttruSmgXL97Mezat4wrEq7+sm\n5PHS\r\n=2+NP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOlZzeTDjQStoyfm96+H6O80EQfUc81W5FLCJvYs+DjgIhAJD86PKyw5xbiE36GWSG4fy5UPArks5ua6m79+cjOA7S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.b6c53425.0_1584118513368_0.2203089139938721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/slider":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BINkILyUhVgnnDjm4Yfqrpar+i6DZ4nejargtSiUHXGbZ3OwiHBgm+l3vBm6UCDyP7WKUJVDjztjc+33SgHhqA==","shasum":"128d796510e20215c335fdaf22a6cf210773e442","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5vCRA9TVsSAnZWagAAQfUQAKSzJrI00Kcy4MGDtRNR\nQxImYHgC6s/J6nBrjIVBbdEJNuScp6dALC63S+M0R65zl3NCN0bgxFYShbgY\ni7FElhYiRobQC0j/BVOCg0ilOvtjt0CrSJh6wQVtAndUtAK+CfXRoGtSRE/l\nm68fAvzZ9olR9Uto6lDYYpXe35WqUS2C6ARDZbVHdwP9Z4PqbmbWbkgckgKx\n6MvgXGIJj+mNXTYkkyQurn/78Zb/pe8NxjgCrsGePR6SH9BKP4fO8cggdvsm\nolnZBcFi+4oNuF3mmnQ4mWkIrKvV/XjhuX7orS7KeWDJd8Dy7imPwIZRZ1SM\n43ce2dNz1ANv9UyrT6n/J6eyT4DY4HAzYU/+UJyEOsTL/XWfa+ncVyUsQbep\nKKjPTTySYfDsRFBdmDI70GnVlqD2WwNhMrOw+M0IOVJIDHB8yrbPHM4Y1ZzH\n5FE892VbKdGZq1GYGEWHGVYG5IVrrDBUHNfThPckAdSuokRFzv9FOYXhsu/v\n/1xouIoGgQJ6gcsreGUnYfIplOfR88zuLMy6VFJ0LrD+5r+u+pyTRP8v+D+u\nsW2rqJPbGcTN7Pq+txitMI5wHVkvMeWPloQY1A441c2isHqKsUgVjpgUN4JY\n4aDBuOfXXdPttkp0QBFdwFGDp8mjTu6KKxDqLed7Gb/ekIIDhZS4D0qTm75z\nx0rM\r\n=2Hp9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChdQ0AR/uMLmb9CP/qpND2kE+Af0KBcE/8rcoyHrXlJAiEAkdGkkGUd3c0Sw95rfnYuSM3s88NjTViZu5NsmFm0RYw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.306cabed.0_1584479855562_0.03015893778909917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/slider":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-305Sf6kfmqJvzAE6XC1c6ZXwGMK8M2nh/8y64/byVqloRVXVwXUbb7yMXG7DDq4o6EQ8GJfAiRxiOUeAqm+ynw==","shasum":"c721f8eac23c499089d5b60000a6e8deeb951509","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/gCRA9TVsSAnZWagAAVZEQAIv7IAbbyIibsxZ1H5+D\nLomyQiTJk0DJgw4pMvsFoMmPLikr+UVJ1PHdGMhnBtNK6OlR1NeaoJ1Kg+iP\nshV/xjLfcGBamfSmcY5TfGGhVadYAuxBvLRafL843lNYuMoMfd2srDfI3MES\nEDrYhC96/rnlP7bZPDxjYPZUZdhWUQliG2/xmgDNxHwuKcI81cnA7IS9zirf\niLLSJmifHqQPhJ0ZVlca6xfEjBrkDqpIDt7Vis2ZNp6710QdfSExT8GHPuYK\n/Ibu5IEb6HomH3RlSScBgwi2RjZyV+UHTdvX76hniSvfTlRgoCgbhb9Lf5Cx\nRRisXhX14awa2lWgmNQgqEmBjzsKkiWio2+vvJAlfYMRGzBJ7KeWatd48+cR\nGRU7JrEoj30qnGPpkUYCsY++yw3zFufV9jcbeeivqBipuDF9DJChnE6lN/Pi\nh2BQ1SxExYMc7C9IBbpGKtdg4ZPOILlD/FRK1Rz0c3WVQfUCgJ/qm+8hfbBg\nAXdhqNrO4+tIc81MurIgrcWRc/cP2dt4OvQ/Q6lARwazn7zz6EQEC5KObI1V\nBNzebIedFSBpRSS3+C7NIQIYmmz7ttJGC5wh/WJvMfzS9AJwSzPJxUTf+c8Y\nG0blO8D5NHkxg0RjMWmcWJOM2nn84sVfgHG3NDT+AfQwwkPKpsUNxjPjyWes\nRPGJ\r\n=hyWp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUCjm5LaiJed6kKobVT5Up48h82BsPXhmvpkjZblV1NAiAsKjPXdOqNzOid2L9GYMXesRaoaaQjkf4jwY7SXgPiKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.4e250cbc.0_1584480224623_0.021709451336334062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/slider":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aPDyqhnIyqJ4DocIwFXSk5hh1gpp4yxh8xqbEBj4VUI42pnyRttJwi3wQuWUjS2LZge0UtDo1Sm1vsmlEjD3/Q==","shasum":"82c30775d7ee0b645c2b25fb6219fd4b3547f929","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmY0CRA9TVsSAnZWagAATvwQAJElnwozEXb8ZfdwoEw7\nW0OgH4SDOCEYKQQC+AuSSRuQfx7Mw6IGnPIvbG1RbPrfkXWorM0c3AOMw2Py\noKpIYxbmA5HgM8rk67Mnfz4xeckEiUcBoxOqKdXMk/sTyh315bGQ9Zpqjnp6\nKgNIFGq+wKU3w0Qayyw/iBHD23w03EmN2w0SQV3CjY9mb/Y/qkuXNNdxcb63\n7tRQGMByVuaKdE7F9ZK5CkGSipZhbwBA8LYqs7Grbvh3t5ejwNMHSK2fBlLS\nT0MELVjyLz+4fAswvsCgUcQKxGRAfldGqJ8+nIOVxdRgBMwugwcn3PJDHpXW\n4zlxytEboCWS2X4AiMBRywJQueA3T2iFMmg5BabfN6XRrfgVn2c5tJUOalIv\nEqArl4TMNReiFVT8JN/NJPR5hquJZ3JRuvaLw1qR70BiNZ4iuADwC87AcJY3\n8b7DG+FDy/5ggTnFDTyaAjCZfIxGCAsscp6Uf2DDuRYlHmBGQiMPoXXXRJsF\ndQahS/llFIRHAxIGSdoWOlw+DcZRrTH1Nkgw92LZViW9n1P6tcAOfDAE5GQU\nYVSHBEZSpMhHfSxz/GGS7buEPqFp6M3jmtUluJEh4+PcM2uEuaLmIcwrQbJK\nAaSlSqFBrpd6MTRw1koTQ1vlKLUNpjI+WuzB+FhGAV6NtL1Dn9Hv7uj70qGn\nomLj\r\n=L3vK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj5IIHdwDLNUrJyC47M+Thqp9tqrA1ouB6iPzzGjnVHgIgLXHsN2STEu/4xCnBC5lqyGeSJSRHJLKtXvuI0oQ/nVg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.ff82d9ec.0_1584555571869_0.552704207458196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/slider":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QWzerJ7sfHidIEMdqs4fdaStg9v3tWIUPK5XAP0mZzBS/XQGniPBsRzORxLvFYCQ8X/kKKTqf+6viTzwBcyYMQ==","shasum":"79599824772c72d7be2a6c22860f382fb9ed8c57","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8APCRA9TVsSAnZWagAApOUP/1sGHY7kj64mLfStaDXE\nSGKPwVeSJum3htH7+DONr88OJHwZMyDcoooUnGr1dLIJnhmcFfkkHI6yqGpz\nNDCm8XntpMl4GN0vtLNroIUGwXChy2Gin0ji86lrDAzpUIvpg+VhEXPfCRdh\nWxaXPyeev3tORIUC46AdhSY1TluIn8jbg4+FgP7nVH5hXWjtdEtHjb8MZVcD\nv3mkyXDuQjpRBLi68vkrWx0ckGOzegO8OCD1vCsAsixgf/4x+/G4Bqgs2x4F\n85eJ6L1WKsQyV8FIIAqWsPGpkMHQOyEe0a732HInDEJxSkDn+Wz9lCH89Qjy\nn7ClRcK9K5OSrCDdHTw1XDdI1rUfmRSwTuOOSX85qPmU2We49QlSAbp1IgKw\ncQIfVTzJvn8Gxqqr3pYM46IbCTWUY65P5rK/zpL9JXEGWP+wQKW6EZ2BsTYE\nEGGhUE5VdjCbCnuvjXv6E16EYEXYCBophmBIYdTtDanLe+MjTyVm6XnDCgVd\nb2g6Y31U05RHXMXPorz8KGC4WrNzVqtsnabs2dav9L3MDMmwBt4qA3bVLvcU\nVAu4mR134pQtud04a2GM9lLYXEUu7I78DAUEIgX+aD0jOxJAxmBvIbjB/lvG\ntNABtoCoHl59lgVOEOHXmTMPtw/0aGQZjnniwtDA9+2w+f+bikTFF4qkS2Ek\npJs/\r\n=DcmA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7aPdGz82upcYC0hiiWR2wigOuFrMV2rM7jXUJTL/CCAiBSE4j/NmNlRPueSHFNMeo/tn6FpUVJtxb65onRa4M4RQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.f50f48ef.0_1584644111085_0.18131871749846096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-slider","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/slider":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2CMJ2NrjfM8lC5+7pB1NNv4JfY9oI5RsDMfKiY2qBHDUThlibsF+48b/FNBJ2dMzMS8HDkEu+Io8ynt/QiujOg==","shasum":"f3bcf03f6c66a0b13fe5e044a7053c630d175943","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hsCRA9TVsSAnZWagAAXHIP/3T2AJp4vI+sgygWPLo5\nY5BU93VAtWIWimGC0o5PWN1+26e8YDVVCkGxMZtgQ4eWETPOzrMOcmSckUtm\niS+/t+y5rpdLvu9R/KW47lXr6ALuDt1Ad47fbtUR9SOWxsw4c621wnTTWNhT\nqDSYpRHit8YOvNLQzyDS29FsbcNUM9sotglNN3VU5rTkyvyD+ksQ46/teMFk\nPJ4mymFZV+4uEgqtTs/SdQlzI2YkCwjGLAj6rBuyZxOdvIHUKCvJgb/EQoDy\n73w1x1ztJxcOCK1PuyMsl7VZfJuWkifBb3FFozjbpT3uyMPeFv8KgqR0pylB\nFgBXgbF+dSeeKVQG3dcAA9EGeol4fh58uy3tarUluwvteWE0++HtD+CliEid\nCDuTT1zRBUGyFSaYlDNs0lzviORKSYSwJ7vznyIaFEARr4m7vTdlGmku7EqK\nRJcmoB2ut+Bn5s/3qjn2pKcs23xgOFOp/ylIj9QzOn7a9873wr7qBnm6+VDj\nfU9yhkp3ZmooRo6TMANwe9qe1SB/EOJRiXKI78LbV8BU3q1izLCpzkDhtUcb\nZN2m8lEZhZahSzEovYx0ofhE31Jmrf2/4xCZVe15IcVpTR/RadxYm5evM/SS\nQlYh44wN4JQ8DtQ+MS0yWV/M9SKhckfFyRgi+kA1euLNavpxvF57i/vRbbc0\ncspG\r\n=fkbL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1D/NOU8uAqTD3LM+5EgwOv6DwX4UneNAdPXTW6iSAlAiB5h4Q20t8fJ1r9bjxnoRvHBI2rQWAPrKIOMIZnH1kcNA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0-canary.134cf877.0_1584650347987_0.5998715975475548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-slider","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/slider":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-+2aeOuU82EPn5Haxo3kvSqrkKbQupaZyAkOHhZBOFZkiqPU03hRobos+5k7EpWuwu0SFKuEjT24qCeVM3bbR8g==","shasum":"088c028d6748251fcbe5673c7c68b4957718d46d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.0.tgz","fileCount":16,"unpackedSize":80221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QACRA9TVsSAnZWagAAMbcP/i0Z+KOMfJ6UM06Bz9uL\nVDDS77CbUVDJUu2rLjKD2QvH1/FPpMXACg5C1c3aQlqZHNr4DkoPN+O5gttE\natW2ntyqNZL/GsJuZGNoFu/xYTRoSlUjdjw0ZcSzi3I1mOfIEHSJRE8gvWr0\nFk5LckbHaXWgMxlUZKDG1bTXKYEXvOyRG3Swogz21oSlN/+8qEK4H6I1qQLp\nbBVzvBFIJeizYVeQFZIGS/NR1KaF45cnxlyEPUuIKNJhHZDLdrAoK1Z/V1oE\nAyu9mbE9kJAhmypFxlvKK5zz73fzbSVc0nE7PLwk5XiI4rnGnw0hKJx0piOI\na555+CxKtgsfACFWdtqUPzQ91VrgsFGhYOS7io/2Mh/DpMqHhJvcarB94PEj\nxizuHV6J9MtIU0zwqa1YYRiBi69iEPS03OGlXLKnHslX2kH3soO4b1NO075G\nMpqbYtanr0wnLvTeTHi1TRqQilhYbHO0wv2yEzT9usx+L8zjzS/cF0/LaCNo\nKjP9HLe9M8aEk9iMV8X6J7fvHRSF2xnXQHDz05st0Qqb5/kr8wqmos0zOzWd\nNvRZuLdurLpSm2UAPf6ePBN8LSNiPUu7hSZgVuLWLgXqsSnC8NhMatZddJPO\nof3e7bu18cMaWaXq5zPAdXOQb5mPneJDYKCNp1vMcfH8tWl9Oj12/kWuB29X\nqs2v\r\n=XFh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaAmqvzNknbjdozGQ3lTIHUYCbnT0JOFUlwx55J9UNfAiBcyOTVO5Xd80BDALQzb2qzNNU8I40YySNnD6ArM96Xhw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.0_1584653311773_0.26905129951547635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/slider":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wqAhJJfWSv8+MKaomB/hy/bZDD+EsKfxW8iVeJ2z8LmafKxaysRHIpvtmKJOsm9OT3/ifVZpgJQe7LVIIemRAw==","shasum":"ceb8185a8c37efe466acc7680be2222f57613675","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mdCRA9TVsSAnZWagAABLcP/jbw+Ogv37sNHnpY8n8r\neu/YtYUatka3vzQX+XP879Lq+vdwzjr5ZPh1u3YLbtt2KtOE5fQS3eEwf0nS\nadWeuIPpJVcbWuutJOxkYQjbGcubfQeNwWLH6jFmvjLGCMg45I1M29ntNwsO\ncRD7yurTDuRfmbsR/cV8gkMZf7V+5eXZ+iY8FEDLkb0sbnz3kJIQLgo2OhUf\nQztYVb1aFkXQhRc1Tfo2CAUK7iVkEjsrYI+SlNuv3HG/ypGTVZ5R6KnH8wZv\nm8FjzMkQ29r3aVYmmqGea58NT5hHrqgJdl4ZPyTfoGvcD5PcmnbywBlwhTAX\nQLPCqNOiZustwSMeihRnah9D6g99LTaLXHFNlaVMIwuDS8cAfS4GMIpiI4QF\nIDJRWf9kAsYnkuEC6if19wZCKNe6Jf88BtimnokVSXOW1a6I16h8x3HmEcSe\nTMTmbO8y40IWJ5W8kq4DWCT6ViB8d5Xp1/+Xgt9fFgCk310FOUY3fIp3h7XD\n/U4UN43oDXSZAkrYKwO1pt1sFVPe4/+Tufw5yHbtPCRpLwOpizXmvmt6YCTD\nqAS6nx9gB5kxESqG18S5SGxtMEQVedu5bSvXMgkZC8wAHJS1XqY8sEgamVPP\nfSREAzBPTo9QnHyMcbRAoVPMqxKU6k7PD4A0J1nk6dG8ZNNsv8X7Ip3H874v\nYbr1\r\n=AW54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBd/punAaeE4YAFTpMGNtHvHHd9kHJ5dhBZpvZXECMH3AiAixFTPGfQdDWt0D7OuMG96EkTkHm8+C+PCrC25W+cw9w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.2c1a4913.0_1584658845549_0.5199724954627154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/slider":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qxu8w51kuNLQslj2tSIQ9DME1ugbDk7AKSTItYa7rvh/DgNQGjR9MpWUIthbFI/UATu0CB2HrVePlBmewK+Ftg==","shasum":"13d3995ef9eafa378d77cfba0dc3aa8a26a7c954","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQeqCRA9TVsSAnZWagAAPckP+wRmpSLfbL5DCyXFUHFx\nGjTvpSNXhWYIotj9p1ggLDe7InvS31BQYJ/X/ujiK4Ufx/C9gC/CvljTKZJu\nWWrCh0bJEjrXkRxKUyiwyx8jML5OLm/cAOZObX+wWSp8vvLI0DxPRIOwtEAM\nQTyycKhcmd0KVw4Iv+qIIefxnnrqGRCOAPp+geCSGLi+B8vcyEEjYEilVOaw\nL1eSkiucmj7KwTcUHJz5hdJLiKmPb7yTQ17EaHo1OTW1c8RmLHf3C1RuOQlT\nlwnluBVu+okzTwWKbf9LauH3eqskwLno5j8isvvlx9kgWgdLACnkds8Cn1Hp\nF+744z4kpX4XRA6Fj0xonE+rqa5HhI7zwIFMr0Cg0hTDDY/yg/JK2oAKRy+P\npPPMs2agf+9m0XMo+SSl22CLK7bNTInWO81XS2W6wyDvWO+0JdBW3zhAAe4B\nXK9Bj6FAq//9t1d0W2dHUGFYYAlZQsM/hNaVBZZI3YizW18b1aUD//F+ZwZk\nq0x48rnzSgtGN1TUidqoA73HixerULHZhi7I4gNaCat1WNLWIKryusFjzNC4\n4Ba4BhPkNDB7g0cLcEtRpnKqL8bRlThYzyaMyvPLOGZoXHc0V8TmsT6YXUNA\nTHt5wgU4+fmoNN4GyU0UM5jPUD643VtF6PbkRjzVwxMFspaBAAQfAmprhKO2\nXFhh\r\n=x8F+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOm89rJ2dnZR9+9R3IKOV0sDoaQf8zm1ueRDMPrruchAiARgS+fEn+taPmMG25l+s6ITkFgQks7lVQqCmt/6qtk0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.3a6e481a.0_1584727977983_0.34347662238559185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/slider":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-P60kvdavgcE4lg7kZWMRBTdlQAh7qMLYwFkpb7eXzL97t9yJfNgRjGm6SNW2HwqNVp3Rp47a5w4R1N9DYAHMLg==","shasum":"a878cdaf98e00af6f7b63746470906f66c272483","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTcsCRA9TVsSAnZWagAACAUP/Rx6EmHRK60+QEe/uhhK\nSvCSE08SFHfQotPGODpLjiPO6PgD7pxLc+tpAq7Ga4ocOuSSTkKa0uYBhqHp\nhMaVzXEe7qU7id+GGbCZfsCRK8i96n8Y21KQZVgnZGmJh9VeEZSJLNzNceb4\nSES1xa+q38RdeFpWif5dPN9cqGQEuyrtcDbm3eJ/oVP9Mvqcn9/JYOPPkVfP\n6BSVWt/mL926/q+9O40TuFabZv2MyWY/Gn/9EPpmqYMScwRIcn7jXC/yQcJN\nSMBilJw+7Kbb/w7wC4Kb1PqbGGayB5yvKRHlvwqp5lOEwy9/LJJRL3h6x8KN\nqmKIlgIOgfQ3nT4H99BqUlvBLbomy8coePeQPZf38Oo+AIyxpfrfxLF27Dkc\nbwLyjNCCqTg8ubTDrotLTjg8ldVFi/Q50yTV50ZzoPDe47jU+/Eh6JB2AdY1\n9BKhaFrhwW93tX1tsprO93IUv6ZDAFJ1lKI4khuxE0Kiftb6dlnDyzRZrylS\nVJM9PsUlc745JpX3UNwGUf46/yPLs/02I/6qoP70SwlZuwL1Tp6FKCowRprC\nyvVT+KkXxNU5H6YOy8PJgmVmMdb8+gFLQ9zHLt7z2kNLTCJnSpeR8FGCN1XT\naujUFz5me6C5LBJU/ezmABssNmfNTEG1zTStCSe3j1Y03IJzqvsS9euPPl0M\nKIUJ\r\n=lCoU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC39uVMiXojFkMjJrlLLt8fCNYw201dWF+WFXZZYIRd7gIgAw5Jgk7A3jsCjfyjusCfvb3SgRQWve1bicWagLHbN+E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.603d6eb3.0_1584740139906_0.561532461163734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/slider":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pgb2wuqLCBHFrZlCbHi2gXPQIB70h3qUQwKAxb7a3Wpj9iblJYB0DVMW9GTXDb3eHNDcTFBV4DyLMlxbovVCjA==","shasum":"d552057e988e5aa50c8319d6acacd43a67884e78","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWCCRA9TVsSAnZWagAAnrAP/iCRD7nkMUPC5uLmzcbM\nQY8aKuM340IOIKNN+Zg60prrfXJf1DtxeiqKbvgSoEYBQVcpJ8Y/n+If4mwq\naZl2GWWBrUFEoxoq/Gy7HxoSAZz4cnxIgvigTfD8Zx74yiRjOa/C1xwhIEqa\n5o8tDpeOTdJN4w2Of+CMq5YTrv1KxlM2UqWxHg0dF5/fBHWLTRdujeD1iUR9\n8mHldStsffnNW/kNV23ZAgVMICEQGiNoqsdndyPLcHXtie0E6vLrEDNBqmrM\nH0AhEyRWYZDyH5XPx7xv4l52w/SgYgGgKifh9/S64GNhRFZ/+nJDJ4n+OgVu\nPfI71URib+RPnTZbt6mg54X0FjCjLjBGk3SHiHbUhWuZg/GWwh08S7YgpRIv\n41rSapOPYggWESDgnf4a8k0ST2t9ASRZgFPCrXdomHsrlTW4BEoRIq5cNan/\nSr/Uio7RfFf/zICnr6UkRJSMlH7TiNGLV430PqRU+sKGWc4XTIF/ACJroyMG\nORFSbWqOiYPo5DdxNqLuwYAjd7qjsgAePMVtpaydbRU1+UsWl1WX5bsEtkOk\n33mwvNYmOhkPEFW2dEcY8+zIcndK2dZ6FpcwwfKtvI6Xx60trUwjIOEneGPG\na+Ym7t2AoJSZDQ0lORSHb+gnZyf8HWglSUBCVvW9i6cc34uQlUGWv9mHWVU9\nqmLC\r\n=lrVY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHfD1TDQN6pPZnKYYLViNQpT61R+kn8UAmMH/mokzaLwIhAKchxxrZll2/NpxC5Upc2tcnmw9aNaw/JBoSx/lTYCst"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.05c6a93c.0_1584981377534_0.2803578327870275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-slider","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/slider":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-YE2JHCwgjfAzvwyWbPLhXcdstN7CH71Qeq2jHYQD9Z4dKsb4V3RXgG8DHmdBjD6nFWLfWkT3ZM6LbFBXvDc0nQ==","shasum":"c8d048496b0b14509fa61ffba72ca827aa2d9df7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.14.1.tgz","fileCount":16,"unpackedSize":80221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiGCRA9TVsSAnZWagAAzYMQAJbOK2TreD9hQeZ6LCcd\nzqdHvEdNgtjAFHuXdeQI9nSCPsT0pxsxCpWrE7iTqQ39Y5sPUovvb5FnuBTt\nlfFl216VRyZ9qkOLAjchosXT/xPdEaHvD5gsunvlvDtf7itB7n6+F9vq4uCM\nxvxnKI0R6GKVTOkiXg/Hl3GhAlKa6fUD6mpDO5sTbzqJ/eYZZ4tJYYO5k9xW\n5BSulcaH/uLZlc2xKZS3+xjzXCc0tITVaQL9wQPaRtimKgXoCe04CYnxKSPy\nE1OuahsdAIxDabXst4Wwyqa9Nrzri1lJXblw9LGlLTqgNOuDWO6Z3XQDGc4i\nSsxt0TD9iMwrS2g6DybkyrnduBfvkvd3rVGpj1VlTt74LoE1tnUuwFpR/VVt\nJ+Fa46qBBk42162bQy4Ak2EwjUqD23b+y323JdHyfR+ndBiVQXMIKKqK5A00\nqY7noRp8WSGf3BJphNA4YiQwQ1LGR7qWcD0cb0BvhnMJrGkqQ1+SsU1To1Jn\nBLg+B44qrYZQZCSW1WxfbNoCZ963pHZHyFaVN2VziyMHHipikKuBnFc3tPDP\n8YwIshMDkDsAxsWcahbqiCPu0+cj9flk4G31G5R8F09x7oOCDjBQUhX/y0Id\nWgKb9+giq+TDXmSR3grHoFS3hWtgw7yn34T/wr4L2m+o37pjw1eAWWxNR5T3\ntqXD\r\n=+NF1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Y+/rGLPaUWC5lFnqp2olFPjnyDI1URi2nCPcUeYQoQIhANNyhlOiUbMSdRmzxwBJLK7uIl0lNYkcHDkwz+PtO2Js"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.14.1_1584986245698_0.6613965121974814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/slider":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aStDk6hrkBUzIX3Fh2WORHO9TI44qjqsNjPbdwWpv5DG7OD5Ciz3MCilfnkakskHkfiaFAow0bjrk+aipvzd8w==","shasum":"429b0f6ae5b6b123417658a3f77b6e165648aa34","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenR+CRA9TVsSAnZWagAANa8P/1xi8aN8bMM5iyVvcdwP\nocdAleTU/oACw6/opSJsTe09BMmhLLBhqCg34ibXPervPSHEkyUBXL1NacEB\ntT5MMYpda0mMafyIA79ymCqaladgnK7AsFMqVqdmAMUM5fB7oA6lZC6PoDH1\nEBhBpdykOwnCpxcJRyPjnmZ3vof60Ke0DqGyrfu0YsfUpDdXWGHx/u4ix4vK\nhn1dUd3GhAVArdSwZlGQCXnae0PupV6LqCCmANatDAopyBWrTzBs+Jd58r8/\ntTmsPExyDkeOSI1vV2XV6dpQa9N41sG8/OHll/6ML7YAa77jpXq6mRXSzdXz\nvif/OuUHXE8Z9eFzr640TXkBWpXgIT1eak2T9AMxoWtyRPKHRPjqK/WbW2m5\nMXtBaMAMUt/d3SnKTdE2ao7btYrBbuIYICcsItYRSkHOlcehbQR5zac8xuCQ\nVR8BNq23CdqvrHEScsaFIyXB7ookzijkDlDWxeukyjlTo3C3BtWfWKbsSYDK\nDEGa00yQnUF5b4L5900UU0ebNECa6iEEje52hjHgWpQLokv9y6B9q2K4LdMr\nfjT1w7tIIuDfEuirYl0xWAasLvkanL20m8opwpG31+J6Ug/cbdw/Bo/p+sri\nALET91Gq+Ukpnfo6P5rLuY3QpBEdPFcq/JO0SwV6oK602XKJb3j/BSOmv1DS\nKORY\r\n=7dl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0EziTdHf80w9AZhdgGj8J2UmgnDM6VoF2pTjUlMIbVAiEA9cXDw7oha4BUVyR9DkhzR7gfO61WfXzocOJj+0UCOWc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.4e6be3f4.0_1585083517915_0.7655989974553139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/slider":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rEHLMvfiLfB8aN4Qse/k2cMtiPyDjayEo0nUQeP/3iWOT4D+l+Zx9T2LWS531MA2Q3BLpigtgkm463QKcOL9FA==","shasum":"929053348edaa8a3734af2e3b34ab5e32dacd323","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenirCRA9TVsSAnZWagAAQB0P/iMSpR6j1I+sJWgzwOAS\n5oWP53kndhkgnfli/MRiyeSqfFFlgwg5viX/sfyD3Z7kBNpM/pYZZkJ7ALmt\ndm2pB3vN43vBu6GnC/bnMD43sUYlpoX7zGWnqTlIdgH0ySxfvAkJE419ZPYC\nI036//osHE2spyM7z7YR6Tczsdv4f6vxjvdHWwAs1fO/SZGRS4Q745+JXpFN\nmfdbaAIHWWWUE+g0ZfN6uwppDKAcnppTrJr2h9tIsRMtEldl9ZD+KHpiiPJY\nsLoLRiRiEIu3eDs/AiC8V2moNWZyFaeiqouUZnQ0C1z7ph61ytTME4wrVBmX\n/HIoCze4sKtrVCEzMDt0DjTos8Au9O/hnOPs1Q2Yt7XnnhUYGBj8J7YXfqnw\n55kpljQc/0A7yar0c2k7JVMXg5Z/BuuG1oSxfa66M+4f+GX2iMMIyj3W6noO\nWgB7TADal2aC2Hgdj9AsEChk/5Ib2tvFJcAOHomx61tUt3ON50ciNuUkGGnE\nGRCeZxHeEkj6+j5bqNYN1k4+zTWDSAQJYloHxKWh3CwgN97NzP90Bdk2oKC4\nfwQ4csQYeuQmbs6tpakjsebJYrOmfrTlKpr0KjkHyuxLn2UVE0X+vWurl+7j\nvEWQi0KEx+7+xXRgxGp3JlRvHSmzBNT/RjaHH1RphEaVYlwv7QrG2GdG7RYN\nWqny\r\n=rlOa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO5pXeQRvId2yIJa7aGAUHzX8Ly0WbTq0AMnjKLk/LkwIgUydvpBQhaqFceJEbyLE9ZjDEsT92eEuUyjjMThVK/+E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.c29a683d.0_1585084586884_0.8149256975883712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/slider":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-v/m4Wy7bgqKUdf/pcZAvOm/G8xijz5csMtOGDKQEE9OvA7s1Z2bjhcPw6SPrQ+kbVqMYeV83QfxTTf1NALSqmA==","shasum":"cd4e02343597c79b714a04a0052537b83d955f18","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsBCRA9TVsSAnZWagAAWXkQAJp1TRpZqlLH/OMaU/cq\nPWjoVMOGSnsL6sXab+ilRWoMKfUnnAIozQY+lR2ePh12gHxp0bCPN3OhGge4\nZ07DuUNakZsowsRNPawYFSsupGXnczrLsBYvnwoF6sJcArZy0kWC8dFCMpjO\nkJNhW03wubkhUFtPH/vlA4LrQ53DGLih4cDo0Go2dgjuZZn0D64gElcnsLNq\nnpQEQVYAfyenq9bWCwStTCTXrsXsFBM63kT7PoyPewrnnBKObWOLZ6CC+dPj\n8RhpJSXMDW8ea22ATDEeWnuup/oVNJPhnAEb+Ok6+KkEl1s2D8uE2/0p5V2J\neIGjqVUEobyxa4YkFcciZ2aCfcJZnoNXOZl1VoefwpxfuqndG/3NhN2MlZXQ\nnVC1toFMHOXp7YY0AlX5l4ONr0ReT6/NMcBKFhl4qI6Onv8CqQoSIAzjdPu9\nTFB/5NQdNZhjYppLIGOqjHrGBHiiX6hv6AVYdLpfV7mi/SkgyYUjXUbBxrwq\n39voGeYo+uB0X1xgfEWTASI0wW4LuFnTuKbEfvH1U8WS7ggUJVvpwM03Ysgn\nw6MSpGnUI5FcMOHrsKVQv8H9SuxAgIfEmC2a8oXDtHATI16obD4h3j4KH1Ge\nkztcwYbb4cBOAgnbm52CltWQ/kMzSH9uqBNDRLMpopcEE+somU8bMbGtfhDf\n+XTE\r\n=Iaqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsRImC5uoMI7DDSjV5nSkV9+y8oSU1OACsKCMxXevQnAiAHImB6jPumYXAJZETWcg59OgOr0hHicO3PdBWhfICvUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.fca3dd9d.0_1585093377219_0.8946356237784652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/slider":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-b4lu50UsJW9t4MLqoNMhNA8Cpzh/hDGD4ldMLMYPdLr+G7H/gPLQRxrK+nwJlboqCqSiEa4golALFF0kaSqsCg==","shasum":"a4f2926722fbd64c3767d3b066ab442877a61337","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81KCRA9TVsSAnZWagAAzgcP/AkDY8DZnOlnG8GDTaOF\nzajkI9+HUVrPPbleSDLeXKnemU7zpj0LMuDpP6soF5t9o4A+LeXLIK2xqdE+\nBoBH92bsjCVRsnqSvPDDqFt1/pjqu2CB0u+xKxU7ytdRZqt0tjdRn7GV5WLs\n7ZgWUz9guddRXr6J+6lUhUlnZI9GL9McUUWe4kLtPLswwPsfA6mG0eYZuhz4\nkBOfpYAOEXIyFNR40p2MhQXuYOTLQQcRnjOGrc5YZuAoXMYObcA5eA3TMo89\nuD+SIHn7hpvYhnRfsu2dpzyOQoca2FStFQ3mwjzT2wCw9Z9P+Ri9BBa2FU9O\neUFlk2mGW8UEH8YOHFyQtv+HQ8xg+2ddxTLvQDwtNiQa3irbfQBKhF2CFvZM\nLbb1QmZau1IB5EeEwN4FLicgBc05p/sj/M/Y/aB1mLfkVC3uvEPW/fVORfsT\nPeOEId18op+41F63jh0lCuqslr5M70dyMsrsqJEe0RDKZC/sAxgwJuMMxILm\nGmk/ZIRmeY02emkvZazJ7WpbACJKUzLX7Ggq4pUV1n46MUNxPi6IwjceucdK\nv1oxhHdaVXdHRJG/xsezCOlU6IR7ktsTcqb2YuilPAgmC4pdJ76VfPlxQXG3\nrPOJmCqUGQEBiCtv5m1BTFkVpgHCP9v8n4UQdn2o67xp18/QbErHPAQhrWaG\nkXw3\r\n=G+Id\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQHOQhscT+E6XYKWngpCKGfecHRX28Om7pDwkzBRsNIAiAiwbXvIx1Al7xiIB5renL7OndXULhQZU8p7G7FlkLY0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.1e73da49.0_1585171786142_0.9873406596507908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/slider":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WsKKOdcBZk/l5QgSTOh4eGTwn48TNk9IDuC5uTxLxM//RiDN48+09WicXfIbHZKHYkxZSxWDyjyt+EP/9l4deA==","shasum":"8ae31f5853a36621550b1c840b90b5c552d37ffc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVtCRA9TVsSAnZWagAAAM0P/0h7IlF7Bat3ox4M09I1\n3X9Hw/f/qFUSvPjoV73r6IbX8kJ5QhNCNZNi74yv5SF/W2camYGKUfm/dmbx\nrcS988sa7CQeraYIh6b5VAmdRrG/wf/RTXYJtOhikJDtnXROA8+uTBMMv2IN\nh33Nm75tGEinBhO/+B/uql+WAeVAZnefubeI6PVMWwa5waBm3kU7StSD28Gv\nQEGBYakYyVCH2UuN9xomwDe/MnfDN/nj/2q9xH8ZcFNZ2hoDJgD2jaEjWfNk\nr6umtcVNHipmSXQC0DujQh7PJr58rjlwyXgoULxTSBHT+qHGOWhBmicJcKhG\nzF0jdFDcAtvXiAwi1j14dWIuKL5rxauu7UcI8RrJcd3xYv1BGITVnJeqKnTZ\nnX4mroQL3Eb4FAiLiIeryqoEjXyj7hMTJCQ/8Z9C0yHp9Qs0YHzY5/fqVQO8\nOwo7Xt6DhuaLx553UxcBCYIZHdyxGFQ6LA5qegn7cRofMy03T4X9/Edd5d1A\nvBCzEfjPLuPo/szL3uAGXyHTPMUyffSahQtqgnckYRZsnUv6BQH97XkjmqEC\nUz15Phbqsv8wZGyJwcpP6Z77uy6s9Vw90WiGHEkiYIlCgf3cxCISmHbmvMhf\nM3hCF73pug9DqL94RIQpqIZpmZIIUS1MJZlNVoCox7pJIDeGJoeS6BLi2PRE\ngOJB\r\n=arW1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzoC6LvlRua1ZfHSyOz3hOJeuKrSkEal7TsU7bJwmarAiEAxbeST2E5Ro8Hnzd1wLgQGdMa7+tbEUDJFgAuRI3Rhrk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.bb6dfc5a.0_1585272173093_0.4613054270334078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/slider":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DlK0Q0pvcLcwjON/9QE5t/Zq+ksnrPU5drC9Yi9Weu7A6+QJObkBL0njPvinRXh3dIXO/Lu8M5TjkKQaH/MyXg==","shasum":"82a5d43939e964a1d5aed9d09eaedae24244f2f8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloiCRA9TVsSAnZWagAAcwAP/ixL3mqEcKw83KFc20Yy\nYBEgJ0IsYXIY/+pZN9zOqsGlfBtYeKtHck2VTzWhbyTT5u77WbAUW+zFwdIB\n0i5FBTvsSeEQyzMFp3O67mOy6+RH4Ja6++Zd9DbKJ79qF3e1nHYzqfYgePyo\nFma77LBWlFZX3q/IbrtpXeNxGgLzfZZP+uB5CbeI7zbpscl3W9hhr8bezu0V\nJu247evQbFlb5lbzlWJ/nytUlyvKS7kXRucuI3bg+D53sy54XS4xAZAJZfgV\n9N7hqI+Bp4AMKvBafC0LG0mB6q0T8sk9NPEHu1DmG9SmXyPwzCA5t23Evb7R\niwiYuSvzuJM7GCOLIytlGRbjNH+bsdeCiJyH6uT4j4hPi5uatQ25p14lRoSS\nDoWrRNgPruQM3IoFYxStQAMLK8lbNhQhKh2Jbk4FkAJOIe4DMIPp8B0pBqFg\nZw7ha9QG8FI/Ogm+aZj0q4xxB/AwZUO2NozKqA58FeWhT20/DZ6lynjE9SHV\nSGQKvzYORk1zGmfB4IZFVHhre8BU9S9cgJl9WpIaL+wA3+8whht2iNduCVIa\niQgR8nWLuGlcDD4vfwhRAYK6OqOVv072/2boG7dgTfQnmuh5X4FIfRKJWwt+\nRRczOOh8ESR4+uoZLT6ZGu5KkpNrYEvBqk/6eMbkoBztYxuUDel6JoX7Ojzi\nz8BD\r\n=nZQU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCPjAz3Bj8KzHzk7LNxOZ4Eo5A7k6L3F4PrvFW46azDAiEAxvPRVXNXvoQvpv61gb2lX1GyF8hT593dTj0kV8krMVQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.1884603d.0_1585338914058_0.6288752347631568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/slider":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vBjO1B91L3omb3LjtvYxohc0wZliYd3NY1eE89goXpqI/ZZXYKQcKCxHkap3enzogzfYrRRGQjY+USENTJwQsQ==","shasum":"dfe0d6d45db8a61082929310dda9b93d0baf16fa","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyhCRA9TVsSAnZWagAAwP4P/Ah0K2b2pzLOLo727bA+\n8BTWYNeFReEE2KzqZ/d2sKE6HU6X90rsq0H1mSWRO7odSORBqXNoAhlAyF/i\n+zOq+DBKxRetFdKVeVOApoxtsy1KlyQ4pXBNyqKw0KFPOXwdRn2cgkxbZ9Z2\nT1uFTFBtYh2gncoLwMU2eB9s7rHT+r929EUXRsVJkSlw32dADXlBK/LxYhCC\n7qSHokISCCE6v61Db0kiZX+zz0cKFAYGRtcHvAw3ejcCpkUdX6LTkHS741uk\nF7sGEIZYQ5dfjWD+HFxBMEa+U4WqJc8lMaKQzwjlP+iVLUAo/oRh7l1c1BLr\n8IdvgXrt/6eB2/3i9sl7FVGmT4R2sj5A8R2LEG6OzK9HjfC35Me+SWA6sLAy\njqVBPsJY8DYSpLJFSwUuFPflltrnOvuN85osFHrPKsvby/lhYZnM+WYj3x7u\n/m1imkJ0h9JRb4wrV8fZFxHAI7CQVYzrGNC27JKRIlvXH/maYIkTGAOtd7gF\n35dVOd+kQaJaWs4+iHEbW/26PvDXjQFUjGMsHZk7iqcshJzr5gczXZ4fe/TC\nJPWScQbpWdKo/HSRESkTqv5ooNKQt1eonVF/HZvjWeVfiK1YA6Ai7AshYOVq\nxYO5xmwlMFjkFFpXKRHhbG4Q7nIa/K7a4N+fQEzljYmh8RdPi2fPPCJ/t74k\nGZ3+\r\n=eFfg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALyl1UDHetLEGDm3T4CGuOY92qwk4+Qb5C+MHFloGcwAiEAwGGN6iSKZvAJ3ZFcd2feIEvfLR2yKdu+CudhkPRV07g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.aff73cab.0_1585343649276_0.19814974325525414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/slider":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Bnx8oLmpwJGWhe92MpVmwR5V0YzMZk/NqCp8AQRfW4fXGP1Qusi/SCSZYChkRS2HjR+mxIrWxTfRyiZX/UJCMg==","shasum":"653ec9527d3bf71df72c75c3b198efb6a1c4e174","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4f/CRA9TVsSAnZWagAATj8P/16qmhkeeP9w5vtgXnIc\ns1TDhIuKlT2i9vcKZBe11AbAN9rdBQQwhCQ6Rtol5JduXfRR3rARCT/RPQ4x\nGKQ78nfN6ywULEGiV9w9rT3siPcHcY6QecG8zqREnbo1aSw5AOrsHNkogQ0c\nndB+efR9lpQ9+iVqU99obpUOLgp/UmaSD//AHcW9D2y3u59BZA6U0r9aFhdi\nm7z7ZjTdrnYTg6d1H3g+29orAtGkjQLEn5WBO4CxVedM9Di1wW5QzPG62rLd\nv3751s6ujRuxLzUFVdG4pcx1vWA9r0VCADCc+kpczl432fHeIduTQjcdVflo\nClQixt70EGaYvKppVBTii36ro7IjeaQvRSM1h/EMdbIxsZomT8aA5YCstbnD\nJ80aX+aajnmYIOrXxxlWKWowadNVSQdILBiWdSbVY1G/xugU16YCsAI8MywU\nYgGSn4s64tYjNHhXlvTWt+CzKf6v1eYESX/c9Wqamxt77HYFWYE1Co3V/VrK\n8zBC+iVNta4ox65Rqq5iphjtQhlGAR7HUFD6oUfNJBwbAyrZ/EaKV4p8WjVC\nCI/1GUlofARF1ndgC1i6uDXiIVqFycH/ep5wgQ9Q3lLrD0JJGIg6iqMXZJeO\nxr+B2+TiVquw6ehlwtUnaa4Gc+5vnT6gXVuvyiQWudxTCrXUptNRFTr9CSaS\nC9AY\r\n=OVqT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPO2JBAVFBl1Vn5y68rkThEjc2SrBrP356QuEDX7yqFwIgEZWdo5lJTqU0FVsXNpayzHW7GRhQrRs6OTretF83JxA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.63168f61.0_1585678334962_0.14167139264141637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/slider":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-P1T2WugZdFo8h6n3MnMEevTNFKikeT9e+YjwEzaPSGPQYK0BL1HNHw7r+htJ0M5xwaSHmVhJCPbuH1o26jTHIg==","shasum":"baf8486b5ea08c63fa3c268321acedca5c65e6d7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QECRA9TVsSAnZWagAAOOcQAI0lLmcU9unYNl/qm69S\n/D98mokjt6Z4wAMEokAUKuSeAZl+yecwEUFvfFhjtk5Xfu0KRtbY6BELZ53v\nEApSRYHkm/KwVc0vjaDMvD9YgkrdiX5q0RfLaMSiFVfvs6fag4p4eDwlFQwo\n1UYXTyzmhUEoh6aAXZZ1xMPphX1/QP3PdqDuOWGp7xNFzzSls3i87qX/u4fv\n0ru++v1w34KdqXsqH+31jVdAoJHElZ+2fYzKXzU/6QkkOeBv1fzXgYujPYK/\nzvCOnMTZZtnZS8a8/mYfv8nXCNpKd6WdsvDizJBChwS3sty0WL74ptCpSg8U\nfbqudHehNY1oC6zqlEEGSwXq87yg32idqp89KZhFjL7Z2WF5HdUdka4X8RnT\n/aHFOTaWd+JvB6ZKSx6kN+hiO/TvYojPFLWoqyAVhoce5su5euiQRpz6XgV9\nJwrmMUZjycnz4oxD+t8RPpZCnGpCwX2gfBpkZ/EsueQTBhb66CDEy7/LyBbk\n/bkvTsOi0pA2C+1sHxR0mN7Mvl+eTLK9+rzgQheLBZAqdjgO1dl31ynQQjaX\nHdznsDLn5WAedD7LLPH7eoAjtPj6PF3OLBipBvkjkSgjZ9cDxr++vLzKmcEt\nTgx1IpwP1FenDjbnN2bAmeTw9sOD4JgdYkOB/34CdGme8yEIUmHNbv3p0i4o\nYNdC\r\n=7TIv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaa4EkxVV/RpiYhgHQO9lI7L3wn1j0w43MkeNEjfsAgAiEA6hUZq13Mx8wLZ30uVi3X1F1Rula2TCMXdvG10flMExY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9fb79b3e.0_1585689603544_0.21617375275451756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/slider":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/FQvLHnOJfvTPLnbKjfhrVlCZGIOrMG0hKcX8y2VV5Wff+pmuZh3slsMeylXHXNDF/Nngl+nxkjeOg8H74M9bA==","shasum":"b7dd672bf84a7475ca83afa0319896873aca8054","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90jCRA9TVsSAnZWagAALJMP/AtSAvZJq4gCgyvn0Qgp\nhkc343St4l+QoHRTBBbSS0vFiEFBWosEqUPaK9OD/L+DcW4lSwy43YVWcBkI\njTEY3BKPV9E0qr35Lyp5Bpr+0DVoc3F4o8KqCYQhe0l5kRuwsNL3EYBjcRTC\nOhqmAqxqQdw/BvTrUkbVc1b8Hfm54X5nIXQXlkBiil/bwR5lg7P/tMd2nQ8+\nXqtxfytQ0aML/2T+fGZZAjxgVNnvTWP0sma4BSWKcRAYHTHHo00we/vaunHZ\nK1+7afAfzNBBWkCXYG9VxAGKolCLvY8TpQxcpK1CQg41Vgwx7Jehgjs73B+2\nuGgAx7FsyEFYgIg7Zpv5ozzHHXwl6gqZrOtETg+xWP8zb9qyLZUlS5s4U6xo\n5daBF6iHjLxyBKEaKghjpqKXaPpZgRNTvIIfwiJODtLej1aBSdFP0Ky4TXp0\nX2KTtF901Y62e1tP50uclos6iwWk9BxvfSwHSWQBDAWoSBq3XDP2yOj6NkAj\nc9URNeNZ5IpRg0a6Dfc0K0CrG4Eo0+8sfjmFzTN1x1IMgJHbK2zaiJWv95LI\nB5n5Al4K1SZH4XKEoluXXttsktujAFgyOh/rpBB75IHp1d+mufRnn/bbp9vi\n2u9epdqJVzRGveshYHOPOAJYIqIqjFtAlsDPJokA3JizMD28Xnx+TWd+LKUr\n0rKS\r\n=nMBm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyXkfTgIoaOwkhEBBji8SJnsZKEQvYyrz6NNI/ZLhsJgIgNQGNCBS9TiRtECHE/lMJK9ylh9j12c4TvtpV+fLGZks="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9bd3e9e2.0_1585700130784_0.21822569314013185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/slider":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xmfGAbT3VLCp1CvnWz/P4njeBvnrzjuqRoAgJxP/Te57woeQ6BHQis+uqRseyu3YfZ8J+uUewL9pJK/ZZNOIqA==","shasum":"a53abc77239cb3134e14b94cd1b6f86d22304dd8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":80254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/iCRA9TVsSAnZWagAAwyYP/ir7wFo+E+xrCgI7PnQc\nqjmYhnnKHd//P4GL9Vrh5/BSkJyVH0FOUqDWsR7+7s8xkLmyCPz93cDcu484\nILjU9Id0IuKSuBxxpXbmPJZD1+ApKNbsS4rVWT6StN0NfjH1bWJG09Y9P9xG\nDcoWZOXz+RF78qH8OOyYegbRrJ2ga5Gj9eQS3vb3vKM8HuXkhUivt+pZzhJo\nqMjtPATLD/6cZJD40xEZ2GeBNSfrp5Kgo72WerD/WqQSMyxwoPLMPbZhMHCY\ncYTtIzlBvEA/BPkxLw6cwTmCRF1jwjkXt9poU1zRNmYEtzdLYhk9IJ/mNFxL\nNRYs536H31ZnS+SHF80hgRjBujVxa3LTqBE/rwSVIkLwTqcbunzyF4El8Xrd\nn3eSCNOSo7TX2GAPykwEzuQmr1mroQ41OVR/YqysGCNY4eZ2KSnDKQBn3qUS\nndvQCW6XvDhsB8p/2OVnw0f5pvbus3xawmLFD3JFSRTRee5NaO5QOhfZN/QY\nVQJHjQ1ejJP3qh5q7/iIYENf2gwTxGEXL4/kmAaSpEOXXqjGjRTCiLTpYHSx\nADxkf4/iR5WpuY+HWN5tM8jbem8wkaP9KGRwfyQfmStB3/lrMcL+LU7hSqf5\nhkTjROUUrwfq5c9bNc0y1A9icI/r/tlZE9+M2yIsKgpPtNokA6vWijO7PCVL\ni4Vf\r\n=++EP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDsqb02ryinmEaQ3UWEEc4ElH7AyI66Vq8kVRDoRWQaAiBv3RJ6Ne3ePXr9Oh1Fwv2nQ3fEwWu1iwPxfmS09z/l0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.072084ab.0_1585766370310_0.770817523418865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/slider":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-n3rzMzJel/QFl4qbCf1iTU0DoHv0LggANLJTL7q3T6tBI/1H435u+6/AkBYEOUvGx3VQEl4nOkbrf2iLRDv4dQ==","shasum":"618e4c65c27409850273a5b7f850fd46c80e8d57","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":80254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5yrCRA9TVsSAnZWagAAUJsP/2aqhs+wMcfo9skr5KdE\n8ZWo5gEBiAqQSn3uJD5sO7XiPTvHsrYvP2BaEZH2SiJADjbWjRYedOGRabOY\nYiIeLlCsTT0rMyqYuR0rgSZXWAPTX7hAra+ubdLFRV7ZdO0AmZINjrMtfuXc\ncJYm7Qf8A8r/ClgGUOFVZB+KFEpwLEPOiX87U67qo7hv6jOGOHcESUjkV2Fj\n5uaDeUQ6zEM1Rmd1i6Y0Swl1qPqqTRPsfRJcoZ6VjEWiZ3N//dDMHTYQKA0a\nH9LWLSbS2Dn+3RXYe1zA85FttBcBlPb/xqw785JuJZFiC4DjahNzxDXWJ06/\nHm+XSTxt7bRU4lm/t5rGnku8ShS4Mo8y2uiew0FZn+MUmyQZA4gKntxiJpF0\ncufCOooDU1/tCyz5EvD4bccLmXDzYycz6C8xLwnDLgnM8frkJCF1h8gQPOs1\nIKRKkvEzbdX8gKtDpTs1qzSLeUP0i+WVjkssWeJgpeKpSWzJxQc9De4VieB3\n3SsMWi4eZxN9puZo9dN0m9JFMwFp/dwnKthQDgFEehFRkK8NUH36aYmnlcFm\n6CH0+856KVAxgS/QkS9+xjSrWDgXexic4l/Wi1w/v/ibfuo2lK4S9v6Qbztk\nuBruta0CfeZUCHvE8vQkWZi7X7PeCYFXUSe4OaDev7726yv8jdPlGeIhutXF\naGjt\r\n=ru2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICs9wV0+8n01pylt2EdFL6AzHBjKEzA+f53kqh+xoDA7AiEAs8vYRrLyg6fim3XDZZHff65HPla8QoKVzvGsZyTl0t0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.4dec04af.0_1585945771470_0.44563319592990025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/slider":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nCq26H0inRi3jr4sGPAnaK1sLuDxVjs3rrVGk3j3jT3Ki8f0xK/mQnA0yWqlqZdrOJtyZvGfVxdfSnIYT3Lw8Q==","shasum":"7b5338470ab1f0579ebaa1790fb7fe9251357851","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":80254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y7CRA9TVsSAnZWagAAUnMP/j6J08torlEUMF2kyIch\nMk466IF+UvpJdzsVPQ88hJ0XjQtu++S9BSPhA5Ll7OHJIUCHNBHoSLTy3HVg\nZG3ULvPtTcE7OEn7e6i7ktKT4yBpWxASxZHNPJ7MK0tZEgC0lYA3Xb01XQ4S\nZDCSow1u3rR4JrQEzg3EjlJ5yWc2zNy7BQj4rE80s9Fdv34rB/JKsEhYP8JB\noDRZpTlD1INlcZa+n2gqXgqA0zM87xZa5oeYj3nwgzzZZlCaM/9ZQWwOeKlJ\nIjB9vLdTAITsov846yorByKmMiUbTvn/otpwkzhpg0s6pm3VVptJXsbsFCJP\nh0odifAdt1N7j+CQQMGWyQc8EKCuYLJPMVR3vFqHa92qJjQTQtIGnHAXldcr\naszjdp2re5gnzBwuwntI+zoVoo/O0Uj50b4kCzv+puebiVDXdtdNVFw7Lmzy\nkhC1gKDnL89BsyCh3QGih8+rsBNMetlhq9ZfTxjxRnXC8hBQHGSRU2zY9SC6\n9221Psyqcv5WuK/3+ksq2HfxtF2q9YEByXkYtHthDlaU8zggW5N4F2J51Cuu\nb+iwujrgSVbOKrNRyjeG/ByHrOB5u4/IrMakSCGz2Sczgl+t7tny10Ft4UKh\nOYTizfey/4y87gUx9CMqFwbHmWh1ZAg5cpxa3PfnfHBJgaYCa2Z51IMr6Q6k\nh9lF\r\n=CzAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBP89laXzCXMdp2nEZrGuOqSh4bbc0Fj4Rsw0YQ0fZ4QIhALE5WrYq/pU8UPUsIv41yhTQtyxvPb8ufg42W1CaynCc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9b676354.0_1585945786853_0.667621509291767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/slider":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CWFHesEnJ60+Dqqt/YPlbCbB1Cxa1eOKtKtg2E95nS909PR9atplMOcQJzUxZmqXm8grKuhxSJU7BK+nGRg3+g==","shasum":"41eff51f16c09fe3691a5c745d8a621707370b15","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":80254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6lwCRA9TVsSAnZWagAAP0YP/30eONc3gUcgr/qOO8ND\nBBEsJvL0ubOpNJVZcUavADuDXPbx9MfQmmL07v7GtwQJBs9q/Lz9UOzO5Rx2\nzLZfMF+JgNi5MvNOm33tRe6mSbkijlFPwBQum0ndil62ebR1K1jkWX9l5YWK\nmUdoNpEAKnSMasrE4tvZD7enI9GmF0lFj/H8bM+6p+BvsjD5sjyPkOJBw9CM\nMrq/FUNoIdGi42C+KaymX/I6t6ePv0VsasP/EhatLOGtO32igyW93+7q9cq5\nrpXv+XND579gZ10+gmQrb0AoFDFy+7KuHn6COCHnpPa+aPZSB4uWwzUye8XO\ng7srdNHQIQzL1NUTqJlK79aDt7h9jm0yO0neOF05hjkkIS8SVjURUS+QyDDw\nnK5tIsHafuIqQaj8wT3tZ97oIDTTyUPQ/qDDLd4TyZBoT4BSzrbDVB8FVjj1\n7LuRPfH3884PZ1EumNTGHISFj83XvX3j286y/a0nTtSB4ovs3zLoMH2utpHR\nb3ZIFvGPDbcLHUYA+PV9jTPFAozpj16O7xuIxkfX0MbpyKrXB0/iM+oDIFzb\nBXV1GSn+W7ioI7KGG3lq8Ei+Jr1jpolMnG/XWYFq7u+X3Wwyfmu6sEFWPT+u\nvnmqPu2AI3ZYY3ZRk0yAFw17q7A7o5m1+KqMFXpPV4EpjuAXcHhCR2NWVyXr\nkrU+\r\n=Qbo1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKpxVJ3dQLOAKdgShDg/k70lnd+uQtQqogXDaFjseeEAiADynEsR9HLtH66jix7ZqNlohTT+88rwlkIDkt0b3Hlag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.6b946095.0_1585949039867_0.3419746682071163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/slider":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QfBdLGGtkgSJTge6WIgQUIbb4kU3N2KedEZMmbvV/BPClT1JLKHQH27J5VykcdjPoIGtK+1PLCF6lmn+YXNJFw==","shasum":"7a6189ab6cf7285df75fbd7b641e50f21a8c2c55","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":80256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6q4CRA9TVsSAnZWagAAj14P/2L2PBurpEpiw2JDmI0+\nZpq3Bv0YfuGge0trtFKW03cRtvFWv/lLSYSGk5YfY5E/KLph9ymOXuxvAIHG\nPCe8mq/8XPp89NFTS4cOU8u8KKBYvD04Y1/3rXTdErEqTGI00kmoh0rdg5yA\neXehtDTzzACMWjn1PxpByAFNDCkOAOsMqVFa9tZqm3VihkcYaczgMfcyM4v7\ndPUVbvFDuLq+plv3Z+CdovdgAhcK1Ebs2dZ//5UttLsnNsLj6FWZ94N6uCcw\nN+9ZTLs3pyeKcGvTCHX78PJB8o2yNxjmpmLYgId/VkM/4XCYkNQlk14Fzd89\nRUfshmqnG7R1B04ZeILXs9TYhCozbnBdkH2cA/zYzQCKK2fvcudGr0W7kAJE\nXze0si5If9xEDBq4R/lL+/B0Gs39j5kkvU52JqVg3PJKvqEauxWSqHa9bUv2\nSeZ1eHfGPGem63ynCk4w/y9R+vD5c20s/2R2n1YZFxhyll0XfITBbk02iA1o\n1fbc0qzfv+IR36wc5lcPuxYoEz+q/rlATdoGhu6dG9AhsszUjpnD0FAP9jOf\nddZ8n+7XPjlcccAgbM1wIisrdhZ48q5fZEzNnh61/xXuZX1BF2gAN+5RB1wn\nRGZ0iH5r6Wpuoo4l0ZFKiVacKpYFU+9/hiMhepwQD2AYIPYPDCn7ynQhpI2E\njhYo\r\n=0fDJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx3CYxA5YicOR12YiHwdI4R4wD5EGbmpuI1ITaMzOVtQIhANTzmBQPCQmezmNkamcaZuXMdKrYBtihqOQ2nKxUXQ9N"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.5ccbfaa2.0_1585949368569_0.37099812033000923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/slider":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AvAtDxBdtANENu3PiFm8OGIz9hm5cIWkIXIt7v5pxn8tSNwRUDErPi1eMuVPVon6TdiusZXEn4eP0nrWcgacHQ==","shasum":"dc7448934986cf00860faf235f43a4782c5aab17","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":83856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3JCRA9TVsSAnZWagAAa9sP/145z/UdRcK9Ovh3CVoD\n2Ysx8HVgmREfwnNn+O7FHfDHOOk288NnsySxY/pXSPNlqy6JAlImrMn+e7vU\nN8OZlvocQQEDcbVHPaiTgd0rCY2pCp/lTZQqA3uycpCidY2/srD5qjBxLMgd\n+9dGkEtl/bl90K1X7SF5Sjqu8tWKrtgzocPFjm0l4UV7P//r5uh6256ypQYv\nP45o4foRWDPsPNZ4jEnC7rZV9c5pLW9qWuS6U+4NBPRfVpLfSkfwHzAfI5ov\nXSVIB1cEqQYwOibtgoX+XRiE9qWb57s/jaX4PxoOKRirlGZ8uXVtpAZri1Eg\nkKA4znDu+1mPch5Bkkjs1fULoGcVy/RAgnj7aQK3uyrUyqxDbRlrYQXVtBeU\npcq7P9TKqdyctbrOi8JftOv4MzprQQZrAQieqWDEnEj2bz4oI5vQRyosgeQJ\nhPtNuq97UJP+BbQo1Dz3E2hb6VS0cgi2czoSVaMVv91/wuiEOf6hTaxkeo9b\n/tNv6z+4yk3R5N8891oSWLKZn5DMPhAJ3yivY05TDxt2aZDaEFmRLhSFs4Bb\np/nLyfRi3NV7nE0tIo3dlqndHWXxyccppNA3Ar1ztEUS3shKUfgnNXrYHWy9\nAtzo+ZZHPItTH1zFzmqPMr3r7Eb2k1mxtCPBuQnD/jr+rTZVtzKD9xmsImoR\nWhTM\r\n=UqM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGuz6RHS2zmg4SkNdEKzbvxxmNwH2yvqno8CkXEaYbGAiBqit321imndA685qSdNwqCdEov3JlC71Ret30UQ7lDFg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.a0ab8772.0_1586290121296_0.1123759750780906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/slider":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lODwp9JmHgPB1/2MxOkXbij37y3dDNTGm/KDxOBfn4DEkE5lHNJkOsmcIFKeoG2f3YQV/l/LpT2qQra8G+ReFQ==","shasum":"fb487c1204ea56776b5ba088063803f0dc7cddaa","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":83856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOTCRA9TVsSAnZWagAApRwP/1eO5OtbRz2PJt2cC+n4\nLlWG3Q1yvnsaG2HGBOKoMit8ipJQTjtLRWj3ChwTa+xlN5HsAlGgPUQ+m2rf\n4dC4+TWIiLLMvXRyPNJ3/mcCUMbxsYIeXdJRhjsBhaWP6qAHg3gfKyjwgiV8\nki/JiBYQOEupNfrtCWx2y85YxMmC/sFo1grKonbqgqzKjwSlUhMzwU0hQvzE\ns75b6BymatzeGZacqbFyFBTmYoS5Qrp+ol60yWEMQs8PEhgf31Msj0kXDDa7\nLLDZflckgGn+vUGCbI8M6TTkV03iXHL6DrxPAPsdJoH7kC+Wl0LmT8kmXP/R\nWhrdHYBSQdJV0INiYU7vxOAACipguvq53PtNKkWa6UGY/hRxF9CmJYhWtJ5j\nBORNf6yWzYECEJp3YP0GNXVYLIAD+BTExgKlNb6SONofNwcT+rQeZinguFS3\n7m994JoejpzUJKHplRoh5HL/6V4XdPtfF3JRLt6N+pzAshI5NYkiA1FO8vsO\nJ26dCYzjKFliHkmKKK6sxXD6mkprTpqm9rt5UBBOBhSY9jgsQcN0Se9N/c2b\nLpLgbDtfJHaIziO3NsF3Jtr1QJCOlKw9CBKFhCl8eoHNk2hryUPMVBoS4JXM\n0p+VkHVPaDDdMwAhy4lwjLCqEXylaRZM4jZixfQSenIswwYgm2FqEyEbVFOZ\nfV2y\r\n=y3ex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjL+uU7XuL12QR7Nb0499Rxfi03DPYrwZcKA1Nm5ErMAiEAp8kWkmpNe83P6AyEb03KSz/v1eOW5cx6nToQ/RuyAkg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.8d352305.0_1586295699440_0.9579691916249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/slider":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WqBFE5q3rgs/QqXAMrNBTKdWXSR72uFsjA9NqtqnwPR793PGPQeAwKhlyt1asKgq0M4gAmg1AT/B/Wwe0hjzsg==","shasum":"f15fef1b161a3692700af9ec1e2abbaa8549f097","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPc6CRA9TVsSAnZWagAAMsMQAJzOxlUNhRNA3ccC2FSx\nsOI7ndgGq5GuE0pcKkAwqucFkxGcK/jG60eWOo8e0gcaJwFh1jlC7/lQq1/D\nmJODyODvDFnvrHNNXG4hSUHmBp8c1SCfMMYL7NWkxvGMn5487AwNhsdypOja\nEi/V2MK57trgi5lES5mrM4Zg/mthxQm+QmUX0ejm5ccwhj7eyuop/8mDBitb\nslmnXneiHoNA5PC0ZH46EOMZkCMt6/7s7fMuy0VQ1w01rivRyZ2yk4xMtNHt\nHa38myTW/+c6PRW7P2S6wSfyhuqdJOOHFa+yvaKRcDO4frjj0fVGsQerhuZ6\nDbjM1zjfBebsZJIStYzMygoQJJJHwvlDcr4JEvEsy7cUVAPBOaZThzT76QzG\nwXNi/27IMXXL8uH3E9qu6naBIh9o5xo4yF675o1ifOGB8sE0FdalEkB2pSHJ\nGzNvFxIjuSlGMR2cNRqSFBRvruH1SBPwp4BuWoeWhLKKV3WVsgZU23VT6nTi\n0mbK7Vd3sh/lP7S9Ie9zNEpThqUbewDy3lLdfzHke30YtFSSLmAje7obTmCN\nwwTVkG6mpDz57+2B3S/tNlRk3xD7bEo2XC1gfo/8mjkJs9sFrP7uFJaLBpSZ\netUhztYLpuEmDJUtswuxTj8CpZnqNKBzSblF0yOhWL0m3hX0mQtek0VWJ1Xa\nwxF9\r\n=DiLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV3iNxcRLkk11rgS85ZV6yyJikN+Gns+Ulmn/H03NgLAiEAg6fOU6yFLfaM9DICAyOmT0+KiYmybPCUhcepvs4U1lk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.31eac79f.0_1586296634124_0.5261035931067051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/slider":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ck0h2yY9dPCTvBzoUT/BoUcRHiBlpAS1I5eFcSREJHAqMVGrIxWo7LxKpjxmSXpFBbbES0Ocb9vhTnEMNYLRkA==","shasum":"c627052f4adbddc0f2d2d4c9acdf459b3a864348","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqkCRA9TVsSAnZWagAAuAIQAI8k52rfb5hycoPTrNBr\n+tmZxvRa60SbUUdtwz7mtn2twv2TjRQXwkUgD8g4/YzgxxcMLOo3hCTOJNkS\npVRGOMh7tY8zFS0wTh0r2Sw/VuNxzYE2HS1Pu3MzRAHH/ckRasTRkMXUc0Jy\nGjyCshkHRlEDOEFjXFAytR7vVBRLPMs2OnSy0Wpm8HxD70sQRXGt66xiAWow\nxBgGJDBeIRLYUMCg/cEkwDzCyyCrmiT8NzEJ2yyjDJSEdczLZA1NNI0Y5qMl\nDNUvx820/XXqwzMjWNwufLMEgnP4VjZFCs6dMV7NhSYRQfYYRPJI7VAh9TdT\nN8G+dAGYi3jBkS6RfA3fAzKwGfHQGzTkC8RqVjeer97AVTEb7fFM+6vBSpPT\nCnxuPQpf9W5qbZSREeZPxNp657Xw3UbyPxW4S69mvV+iCCQ1GNIHjTPVl9ew\nzC+4U17bAprxo3ZFu3XjknTGtTKZ5oQc07fkwB97Mj5FZpNOk7GpOuxl1aje\nErwLMH5Sy2NqMTOHrkTro5q0VhnZuUmGxRjOdIZtoSrVjiYi2xzBDwmu+tIX\nUyrK8r8XSFaQRLkEnaKRHSXx9LPlY6Dhql8D0+myiJcFFH+FvjnX0nhm3fOB\nfkMvTGJjtoLUieSfSZ5S+aT2j10FOPqWEh8lQrAiuyQtZtwTmsgYTHikaVwr\nBEzn\r\n=04co\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHNRTSTdO7/FCQ3apeCZOW+x4z5MYHjwCibFU6kRzsYAiAVEZZJw0ntxdPUeKwH3CYgxjSZ0p+ve31KjlZj6Vtc3Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.ba05565e.0_1586367140182_0.6987613164272097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/slider":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-NWiABTYUmn3hKxQEDI/cE8wqbXkwe+DDUba0cVv+jC7/3bJWrKa5F0deUGZDWxL+ysE9SMLEth6vf+e5DsrqBQ==","shasum":"83ecaeff425ab46a564699b41212308e3b22d3a2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJ2CRA9TVsSAnZWagAAJUQQAKRQz+G41beNGfctduDp\niQc+ILWHuxWjhLJCjp6U8HwSGAm9R9uv/W7DCJD8/4s2D0YSo8ufOKalSibR\njuHjiS3CP8dWcFeiZHybavUbJnXgXSlC3Gn8fJndXey9+VXNo9Z0mQ+IYLuR\nSrxi48Fb2p6v65gw665dJBkybA3dPR99ROAOg7gACmg6TBp6KFE1E2e0B6e3\nJwHHwEvKiXzcVwY27qaCdayqDlO2dYJYs/XM+ejf4RCqrvJKYrzpYnLh3xrk\neO+0B8HKnJ6ETPkJF3hs3TtHdyOV0gsrncWtTcLXxbtLTp6/Q6pXPYQH7f1y\n190c6vmAp3q069dokyOJSg2Ge1lIxqeEzZBfVWQ2Q5h+Uvn/HuCUTu6ECF2R\nCVXWrLKRI2QGYpi/b3nEDe4zr/E2i7S2Ce/hPSiwphYWtKmOE7ofv0qw61k5\nL8Qvbc439WODIHhJtJXnFd9EuirnzSc5/peK8NFyPxnu/J++MV1Ix1qyEzj/\nqh0ffpqxXWhDKkdGXuCN5ZrRKpvjaIF7gd6oe8g3r0q/ZPd6X8VbSGeROuNu\nYbi+srzSX68nJNHqi6HaPfYXanqgE1n41K4ntEI3w8kdbK1twKepwy6x4C2Y\nxtLhXPeJF5xehqf9h1UMwU4RK9+DPUj1/wOb4jhDDNUWhonVu0XH4ilM7qfz\nr9Ay\r\n=h9p3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEF8SLZLbcieR3dOR1hHzBIHdw0qsy1CaehxixHCfBu3AiAkFc0sPI1mmocWhHRJezbGp0XOENZkpKtvKa3zwOExDQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.25099f79.0_1586381430360_0.9180198644536968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/slider":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-i4l2+Ku1qTaCURMf1n8wCn+RK8uiFq9mlIsjbcdtZu4PH98i7ZXoKxLz4cLfJ/6SF2EcIVNjO1TRj8sB3fUQOA==","shasum":"5d5f4acc48cde5bfdab292a0bd28b36fed7f101d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndkCRA9TVsSAnZWagAAI+wP/iay0qC9ivLPMOy5HUB7\ne8GmIa0Fo7NQ7gvuBYlMk0jfNb1BqK0ojnEQS5l9zAq/ClGjt6V5Qq/iORpl\nai9s2a00pBMGmRWwg0eCFAQMjndNIvdOMD/wDwOIvzhgpmFZ2XVPhApa+Vs4\naRW7qNbDuv5fyGBlg0dXpguhbTNZgsA/Iz6DJ/vgWy6vhPvVRLZ0i3Asqx3R\nJ/un+w/+/1wnsd9zNmZ+YGcg9RzW1o/SNZc5W2cse2ZYRBl0Y+NCeSgT0gvw\nX39iUiUrZpzEi3Y8c2xSqXzkUTdKQc+6yIdZyYvJ2ofdBPQmEixzUfxqbGH5\nRZ5PRBT7bjItniaqupRi2u6y8m9rss32kxzWeYwRC82bzRGWoIW4E2iM335s\nAWnpqrB7ewv9CAL0fox+644hKo3NO1fg4My7ILfKzawC4PaKiBNc8hDg9kQe\nUFmaqRZUN0xkjweikT+cnAtZyHaisOTqh5Re5vtEpfEIn588yqYch3W58/6F\npNRrG+8FZB/rFqWVkmdhEJZU7ovf4du4u69khxDArjXQOzpZ9ht2oKZAABkH\nI8jwNd3aOBX+2oX/NbrJfOV7B9DHL/eZ23n1OYwkpnEW7rT9/1ooJTVaXnU6\nYYxjCPxXyCg4EniM+AaX90HG4a1Hz/JLv+oxU+KWkp7UTkXGTnLEn1/5zr0D\nw5E/\r\n=sd4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfDsavUxQGvPsJhYR/2tXAO6jnDjLPl0nOXiSuykMKSAiAW9ArRbcz9YYchRpq3B6C0uqASREizw/XvrY1tWBLRBQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.447e31c6.0_1586394979769_0.9800081721998595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/slider":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Faja5gPYG5x7lHZrKa7VRuwg0oCXD0FwgrOG0sw6KHd+STrIQPBAvCjOmX2mtu10V45FbrJ3hz6T2u+lyrJi+Q==","shasum":"8cdb383b10025c3234e6b0bff41de2f27d6b1c26","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlnCRA9TVsSAnZWagAAod0P/3EOYLbyfoMpMeG6diuT\nes8e6rZsGBIMCoKTHDE4+FBiQeuzOcrOxbQet0kq2G5/LkU4WdbtY3ixqI8C\nLeZTUQKcHlB3oFx6FuWBklakAOl9qFNDX48WwfrTEA+6Yb7EGHKVkp3VyzJh\nHUu3++jMMX8u4GPQ/kE6rSdxwQUfJ87zYc8UIRzma/FsGbo1MTeDg0Zc6owS\nmbPNQwnty/EmLX2jVhIMXsE1m/yH0ClrZVE5zQNKH3cP9ZEFJQhbtdPTZFVG\n2D9V95ke7duj4j3UHnsJf42kDgr0AMMpPS/hXzbOZPtYTrExE/x2EuwIbxiY\nAqz63hg3iKPIztJmK7CUjA6IcZDzoohijQhnqehqn6SAsZMUd9esFmM/pboe\nIv+nYu1YemzyxiI60wqnLp2IQfU3Bku3SoIaDyEH/E7tbjAL6SHUjasmtr4k\nri571QteTPfDyqsrCM6mij1Vxthl0erhWGndImqqMgfQqJ8Zf6eNispfDGCJ\n5tYzYa8v2mWDNI1ZCYFd/7KwS3nROlQbi3KlsgTma9YZ1Aad9naq9CuMppuN\nsHIiu213HHKqUzMi8jbpz5R9MtOzoPRXKjq9lLy7zjtY87VRsLxCZH+46OAb\nA49/90K1OtjR2lW5JfHp7GfJ2FFO5dva6PSWtxd/PG6RoO/DWGPUunkSKWvA\ngeRc\r\n=XL8e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcRCtNgsWZhwxQPqqlfjiQDQZYDJrXFw+SRv8hOrWYIAiB0OCxgUPldpW+UJWAHQHUmDTBzY8YojFhuq8xK8aeo6w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.d6dd84f7.0_1586395495525_0.7080890892486269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/slider":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-epliwQqYHVlNw5KjfQNoqaEy5mq2JLhZqwF++5pqMpUhl2GZpElLlWZECPmxbtaD366ksVK/yEy7tomBkIeL9A==","shasum":"5405d3c9024df01a10548ff8e0e518ead15d269b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39gCRA9TVsSAnZWagAAZGgP/iGgPUYz6P7ef0cwChQP\nQ4OQlsH7FWzA4GrfSQwny5j11dxaVIzTSXdss7WUt4TKRJZb+boxY7y/JcW0\nGiFxEsOVow5nYP2Rcz/QWV696DEEejWxOWrJIn3SmLdz4JaGgonlfBCCGnha\n7GY+M/k6eQ6p/WG1of7ShNNKQCS7xPpiZPzqRKGLLtqJRGzM0fmCRUvA2WkK\nWm2u2tF0435aVpoScgup3w5vg+0kkvSydxa8frcs1qocxYVXdfSsb3tWirUU\nTKBYUjPqXmus7tCdCgSkQK28ZYtUW2j/oxCX2zwPzNAx6HWiSbFWz0d/4g7s\n9WcEglOL57x+S3IZfYhBvRjEMEHx2Q8pevDw0xosBU3tlGUrQl9p4bJzaizT\nUab9jq/y+YGtMasChXh15XZcXCxVETETj9eq7Im+wAcWLHqtW1/AdgYEy7ja\ny75yUTvKBQFcEHf2UTWu7JnXvEOd5ymHIykMeIcBpyJXoecf00Nee+TDZMUE\nsEmaRnmuWmQM++Ef0u75+8LmAY7LV8i1479j7ZbbVfBqVsjxBMZbMFnM4s+C\nEnG+eVOhVj8rOXSNeLQZCsZUn0m9zyA9qKrSkWNkXlCCSmHXxN335MWaHv0A\nem1j7PvGGyrBZM3+rffl5zLX799rJeANnd3DKwoL92MhqumSE5i8BNQNI8tL\n+OiT\r\n=iNDw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD300/ij58mZbulDI1/LDGF4saAAdiLx3ZyVUZSDnie1wIgJ7lvdKvAO0j5mp/0h/CuWI6AZSsciS3c9XO7NmECLJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9b03ee68.0_1586462559528_0.5105775066682383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/slider":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-65ehQfE5npcAOVwUlroGf+yFsu2AKEsRzBZsW38vkDXrwS2SwtCDq8TChY+ht+6mkbSJ45uescDVZRVYueLv9A==","shasum":"4709c95593265ae2a391a4aecbc77ca3b0dc31a3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcCCRA9TVsSAnZWagAAP0sP/1lYytyDFMirDSXwiDP0\nZUXkt29EeGO87B7auTmpzOM6g4O1/xC1uvHrpB6EU6L8sroymF6s46vZrGgX\nyCuFkJr/QUA8REnRcu/To0mvKOtNjXpxL4QvqVBoR2y++8Xz7gEq3q6phmca\n0qswuFcOyMQOaTB6p3mOBBJE6tF5plFQPdRaPqPkNsg8CHGo3CE4lHOxJfz+\npyBVF4tPwNn0/yeEFWEHxML1RMsLknp49U4u7eUuZMi9huVD8jnXYLo3b5+a\n/h62xHmG1wKGrqogadKZlCuTKeVTiMMUtrd8lNCqW1uvh7MVvJYAyrz2ADYD\nVKKI+IKG3P3dDRDplOwPLyRn0pri4QueMZY7/OetEQ7ahQcVN4GYrqCoyAcy\nvOc7X30EDAmT30kMujAgteJm75iTcjOCJDjxoEuok5emK2Ch/WHF+N+4eFiT\nCU/UrajxTwndpAA1tEtbQC7ITYLlRf3aB0f1eG2pCm1eSXfo0uGnmbIDx8lX\n8LKKApSi8fcQZLiA/WZrsauZPqjD+PIsLM8+IAm+2vKxBks63TeWVYuUTT6s\n0XEvxSTf7L35aBE3+AMcU4DsQ88tuxq4oPm9yLMftglIMihuTkQKIqapUNaN\nB0RzLmBW4F5PlWmLCQpuyXl9fxP8Aj3+R53ImJmuqgoewXHAA/d6kWTZlnpy\ny4cK\r\n=aDil\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHodOPpEcF81BOZPvdjDnwtt7FYMVNsfpsLux+ILiOfZAiB0pQ+5dDyecOMyLkhcRvdP+la3n1bxehJC1cjpoZ9grg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.bbc25b10.0_1586558721904_0.7452253765039478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/slider":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IeGxL5+W1lOPSYRwOZPExV+NYJQbdhv1D361HyIsnoUTzqojkqKd9knut2zpBUGrQ+QjT7g2Uf8UUtupgkoCwQ==","shasum":"008c4b0b376a02e7bbdcc74cb98575eaffd9af25","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aZCRA9TVsSAnZWagAAS4wP/2jn3wfIlUNws9OiegPU\nsPeaYPHDwxEILgrCSFrxzk0G++jNLd7ajK2cKmDxj8VkkgguPKK5ZQP22PHN\neyoJpz533P9ZCRPkoty1wBp/ISLLTlqD+cLdttZFQIrcglmUu2Mt1nCqssr4\nd1XFjAb7KWUJ6PnCJFKx2MMbZFZa1FC3+c+jbqblEXMFbNW+HZIr4KnTf/Yg\nx7PuR7+mdgeidMJGFuIyeSbsD5YKwS6AqBESUs+3K+6Nz7cRZSTmq2XksWJE\n3Sz3cOupnyAgBvaAxN0j4pK1OaOwypjZev7ZK0+w2fpeYgRNFntXbmFrIIZp\nJF2mHVXjQXJHZeLIjIaLtLStiwYogLL3V/fQ271uSYJW3kC5wf5IUXQpRaXA\n8WLCULRHvzU7DMWVB/Y4wyB7E68pQm172G+Qqi52a+XJa1fs1YpGkjpwKpXf\nbWoGVFvxbLixDy4jBj/YiVB6wZBfxxj2sTl2sje7S7+endH7Ek57cxoWWWDp\nExjbASvgnEKOqXmYCJwL0z4vOoyv0QlOsHooDUh2EiTDOuqtgOaLfzw1cBXp\n6m9otxajLxT2x8VgADPWPQmL8VbwDWIEWIm2x/7sb0psRc5U9VZ/Es7AddI/\n43fMll02CcZbZiP7MqMhqF9NBTz+szvD//6oG+cEMBgHWv7Mmzo4/6/vwg8S\n9/VT\r\n=knpv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw3Lcoeit5YU+ai+OpelyczGC4jIFniHu2mg6Y2vgahwIgDjWCrxcJ9h9s/snkF+InqQb5c/CNlNoPspmiiK5glMA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.339cbfd4.0_1586972312808_0.890397390223808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/slider":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Hvt1nkMUSH/J1pnDbd6J1M1++0HV51/s1HGocIZsGDq8i5L5hoLbL5dFDvb3JVLETmqq0hWD9DvZib6NgFc5HA==","shasum":"64dd27a430430cd082d6f29df48abeaab757d472","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2izCRA9TVsSAnZWagAAM40P/3sFOu8RJaRPFftOclZd\nvC6hdQAf8PCikzVmfoLqDi4XSYwoPBSDh/MQngTz9tcbsKhHOVxOu2MyUN9V\nGn6umCa/quEVKn0l//8Yzr0SWT4iqRq5sIuY4x4mxnc8wBahm7vMcOOVLeN4\nXpvrRPg/gQUj2Bt6EdfEDHYLYBmHdUrdKXn6tUYgtbmiLJRHL7dbUemMxKxP\n0D3+/+yfRQSiDepXYGEcrfaWBDwjpfxtckS9xO+az7XTdInsW5mvxKbqyPMV\nf9P+P0asEGCyTVzypw5oHSqQhJ3x613NnhbcOu71mGNI865XPOD6qkdwHXzK\np8YZV4J1C9G5pyDYKfxZasIueZZsealczBmtF9H+F+4/csCdTk0otguhtmR6\nRbty+ry1kEa2A9Rfh88gS7EmHz8iypl06x6HZphXIy/olw6X2OoXvvGBCpsG\nhJdKw8+vU3FxmxC9KeeoVIlfv8g03X4buYlaUB/jJOXlRJrsGpJcnHQVatyB\naNAlT3RvMCuD1zzfxfejmtt2FV69hwtDVbE8y6hyVy1YDf78oWtzi4ShhvWU\nbViC8u6SrIIqCDbfhdkk2wu5GhQHqdsIIn/lMfQRAFjyKtoifCZl2NboaVgW\n91Sq/mtlJc/kN0roAyGlde3zvYi4mlXdmkgp9MCb+dynA6vOVMR9ZDuZn1+L\n3x6t\r\n=JXpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlEf9d9b6ujAKESnJvaC7MNdRLiP7EvdZJq+qgSfYBvwIhALpi0EVHerRBl30M/+sta/G04UzGy2UqH2arF8FG1tTv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.b74ff19f.0_1586981043408_0.2038134239755771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/slider":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-neoaiiZQjuXf69348itwaWhN1FXsFJusfVRFEkB2oFWiTdZc9TCXST7gMvy6U9LN/wz3rw789kuykpLUl6ia5w==","shasum":"f7f1e3f7493761079df91ebdad95f46ab75ee98c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41yCRA9TVsSAnZWagAAX8MP/1lPyTSQh4+lAe9e+utj\n9WI5QZzksbwlvr5aHQgcNLOCEB7oDNmPxUBNvnHcCpTDstk77wnmVjO0w6AS\nKRcdyqa3kuPCP1vHvnWIeuJTMVUw8yN3/+fRsMFbYgD9DllAKwUq729foX0H\nCsV8uThz/5vOxegd2X1yg3nCSnLJZ0qG6QFt3g81/jEXBUZY/+Nyr8clP/G2\nwhc0689E3iIiXJE+UjM4oupyNxZhiE4ElpU1ETc3p6n8yNu/Wf5fQc/CeO2r\ndZOK0RNebLPIoDTAKMXG/1EwN2H4sLyLUP7HERO5xqCl1q30QVjmVg4xxiLF\nslsRMXDUoNyNK2XcrnkSTq7uoaNJAEZUEyKA24Be2Gm90un6N7k8KnLD4Bne\nrJtv4AsoZzna9p9rYr4c73LQyI+M2wxCFZ665ZHQDQW4uhtPDCPI752c0uVQ\nnvv3TwcfxPfG8KkykBGVSNpzqJhY/lirEDa05hbbeWZR6rbgg0mDRUvvmHlC\nv/Mm8VcDq9aI0jheFZON7sLW6vnCtV+ArKf55zgGKhvjqmeYg5jC8Asedaps\nO8IzH22NPgIV/cwj0hhP2tPU8LxFd10swzUWCWCfAnRU2sdl+tZPI1yk9sSy\nSgdyt4hTURpUD9lFsK4qniEPYPt5q2qtefYQofkY+RfBlTXQgTdOEYXQq/EK\noLZT\r\n=YnFu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9t0CuXdlNeexdsVWNYZa0mkjxvPUfCyOXY1lOgeb8VQIgVl4vkodSVk9Hk8R+jPf7Cvae5vQ6+j2fmriZ9pE6Nco="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.aaa16853.0_1586990449703_0.7584159194275533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/slider":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0QwXLDNcHiV4uogGt8Xol4iTWtNLSqVqlOqWxFnKfSgVYMTCIUPawASzqTevI9NKtgt9fHJcfu1uevLUSKnbTg==","shasum":"36d41e00a250d83f6ded179ad9e430f1fe86e0f5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpwCRA9TVsSAnZWagAAV1sP/0peLVfH8iOMmsk5ZFaT\nw+mAygF/iGNf3TiWE7SHGsjYBjRmbDwmQuzGzHxG+jjzITbaPkwBPOr4mHdV\n8R051+Ha290FWKxbW8ENe4p1V4Up8lmaFMAvvpIDHjvzvHvB9k9fz4pm6HbC\ntJXHneyefFBmUfVEuA6c3TIL+E79dSVDbqy5VqPC9CAyBMwc//achyn54B80\nefCOeKOKLk51aNOXQ1UJML7seDh1MLTMKMs+esZY/2Ds4dQHN2fuQfe1I0Ci\na6Nmpq207JeH4Ytm0Gqb5Pczk7vs5xHiRPg5awLVKzVSJhfW735W/x/nsKE/\nhnm126NhKybGnDz9dB/herql8AovSxQ4yCcfr8NthpGTHRU5ZHv5R0JOIB20\nLfwN20DTRoFtSfB7nNQcp8fjBl60vJQ7LA3fAttDjiQOYf6xX2vLAyKOsYp+\n3zAnYhTGEc8YE0AC0DjReU258TYylxuag2RrUPjDC7ifQu4QQxDCYkFVLWmY\nqJ6BMqYH7zPdTcDyki3dCqmHpG/rFftB9AZJ7B5hOw2gue4eKWZ7zvb5zmiM\n4UvvFlT6R2oI93fel/eJ5hmlLsNJ489tqrvcPXWHaKATSmCEkV0ZmQ+BZOCD\nfSeXEqCBb/is6GUwRhbAe0lunB0uQ0meO9S31JjeSw99+/+FzGEu+MsFW+n8\nG/YP\r\n=WBTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrJV8Totr/1HyXWeO9Nezc8YTwP35AiWEVGRMVavgqRwIgBbMv1Pzj2kxX5J1+R0p2ubxhGSaJ7Wh2+9hT/7O+g9g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.826b23e7.0_1587063408144_0.9679605214802709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/slider":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jF+F/m4at3U74kdOwMVNC9pA3NTqHoTMqSNmRFynEOL/zovu81TbVwtIyZpC1izht5rKsv9vJ470K83ATEVB3Q==","shasum":"e3ae93a3e62f2ef0e4aa22d8a3267713ff2e368d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjU6CRA9TVsSAnZWagAA4HoQAJ1+3eUVBoPjIW/vn4nP\nCwJcn440dEqS6Kw51jSdRnC1VoBJWwX4aVBYAibv04puftqFSUAX8MQ4Bs4F\n8gCXyDwwfo5/DLJXUbMSdTFQ0zjKSGhTr+Ga/kPS+o7zMXQdTiXjfty2DAhA\nOeRD+v6t4shX3q5KVumAvP9o4w2fjePePZckHEi8ZqgPE4yToGydiaOh9wOW\nBal3vXP9+isbl1xWyPSFO17+5E+Wr0ps/ZOt1GOuVTl9IUHyRmW0abEfj80y\n6Z/C0IwlBSJ7WpGY92Wohz4jmQ3BNV5pIqwLwoea6ul3oUNAi+L77EgHDRhe\nGVBVjyEfM+0XGVkzx/3KnUkfjkqL/7zUXDLN61WHUu6TplcB6CjaHXxzrvI9\nqfjElSLhpuZ+KVxBw+fL02NcmhiCB8s0Fl0lbi5dXtGVX6nEXYTTyC4Fa4jF\nmxaX9gtdStkKZa8MnJZ4IMq/fBmsmNZ7d/HUCrkRT8NvJuNP575t0G4Ek66v\nMNive5lIpmKDAymweM8r0ZDE7pfBUhFZiakEPahCffDFO8LKJolCO5wdNZ51\n+G08hJq/TXO+5YOAZpP3WcaaCET0fFd0xtc6tghPXJpjqfQA4yhv//QGE8tq\nW9pcs4gUh8yMDJeHx6IldMitx145FFNrPas0+exN4PMEGVE1wrgw6cY2qZ1b\nzIiS\r\n=SRBB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgFxTnBx6UA2e2JDb8zg10TaIud9V1GrT5hGm3WtbUhAiAGqQLQsfrJd54BOWpYLBZ1x2gfkkZygoxju/IYAbzSdg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.e1ad2b2f.0_1587164474222_0.054293643254413215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/slider":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-X4A6+qf18ycoFyC1LUIlsl6S0te2cFdzUBfLu/wt3U2Y9cZMsMnDXqIF05qOUXIvWSA/h6+aZPZtzPGxW42bCQ==","shasum":"655bedf4fa239fae5673db748b29236291cda521","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjloCRA9TVsSAnZWagAAs6kP/izx5NrT5/RW16kFO3xe\nOYj4qXr91RO61AU/cKHSvFBHDW4fTvfcRdtiE7LIVXx2E3nc0CrsumE+M8yd\nwOVMWeIzf2QoKUq6J/UnvVMSF4IbTWATD+WWDg89nmIg7VFhwZ8R3AufrR9c\ngSeLlXeX1PVvCP/tiRo7k37HXSSMUKSL026itpt5eXp7t1EYKqp/5OvKm/fZ\nNJU+XpCYsw8PJPTwL7s4ghV9OVmn1+BGdS4dfossaN0AJpdmisLBF9V0DobJ\n6FFdm6LjjGxYO3z8KTMdUXxAgpxfsgT/myiqY5xYzfO+NH9o3Lt5nkwOIwki\n+2Wt3mRlSbIUlqdtAanxkz3bkDB1asZG0TBFxjBO8oU3tyR9vM7/u6XAYPzy\nAiOYADeqgNqSdMxvVUdjPYWJ2jKEnJXhbFamdWDFYt921DQ7LbSwh/ZxBqps\nT90Bm5QqxOpPfGlW/yx/3NNqCPH9DTowCprEoL9sMydVRCIXWyAmtF9NpUng\ngLmNygt6Ue4gqdCXKgWI66hW+33OJI7/B5vjGu/RlS9FRCDAf5jS88OpxbrV\n2+y0nsIdv7yevoqQ8zNp6+frEn8iuE7Tl5Y1pcl/AGdsUv18mfTJ4zCKq4pT\nszDRJjsBlduJ+uaJlLP0cMjtttU/VWcvQ4lmINvfDOK7+EWe3K5b9ZLL5VtE\nqNJr\r\n=NVd9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvkJQclQRzjdgpcDv4ercGO9Xprpql81ON0bmkuy96zQIgcVFpIiR3YL48tzGk7z0vkpQJyWWzAQD68ebOiFcpCXk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.bade5580.0_1587165543954_0.5507287994015644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/slider":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-asktY/ZSFJpoW+jRr3jk2416zUNIAaGiDemtta/pgZpf7Pu7T4qFzhYC0q/P/VIol0iBqftSaAWXkfhlo3XwDw==","shasum":"3994c2a71aa608f7ebfbe9c8452cec4a0cd3bb38","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbCCRA9TVsSAnZWagAA7HgQAIcj/1f3yND2gXEL12/T\n5Y9KqfnVRhGz6rOW1iLy3tNMPs3ufrAodDDPWgI8YY+SnbvRKMgUJeh7Fuxf\nugpPR58u+Mx2CU/aKi9lzuqQGZkA2RYrhj2rsfWPQ0xkRmbKVP3EgfTYy2p3\nHQOvjltSUA8JQ1lQdwVC7xzG4WBzjvRf52V5Yo4aNhTwr159FUGVs5OV55sH\nv4rMXGYuLxTH+tDlN8kSo89ysioTEGIT9eer/+HVTi7E4wuKq33+6XsIoKiu\nNHcClbCUtXE7oF5rdpua3RN+P9Um9gCjKWyxNVsqY5dhY4klLSnJkbntTjWe\nQve8OBX5KGvPcKIPef/LwBzgg0pN3/25/bPWJHjZd4+0Qg26j1NLknpdAN4e\nem85/fgXOrB9eSBnrbJOqVsVBFjm3g7+9k6NZJkQwWxd4ufIYV0BjFyywJ7i\nPgXEcJxZnZcczD01hVRbEb0hYlspHQMWTp+6/YYoRsUc6T11RTDWQfVVtkda\naOWNCvmWk1I0YyLycp7D3dc7yKcjwzDbRZfg1QyJVjQuVmTuur8J65Za5vph\n70rkCWfXDJOXdzaMoHgTlgy3f1kRG/EwV3vq2gxno9hztKgmbuRlpK1osGQ4\n5oHwtAQMUrmgSnJqO41MROYJ3eWoCJ562jd5cPWNhoqE814DzkrSK48ttdPe\n43L1\r\n=Y6Vm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8kUaqT5k1Z7jmLgnSwJgqkuniDx1xkeINv434iBKqNAiEAlfUqzsuNnt8YZiUZGEYWm6aoNnvtrsPjtpBsavLXQcc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.dae38247.0_1587168961621_0.08917096446576722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/slider":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/z+bULI4jRWm+ehEIuvuyCookOx8lQMmKmwOF5CFttKIy43PYMzgfys930la6IbAnztcBk5MlnvQqvRNjkqV0w==","shasum":"4120019d8faa3493490ab0ca6a66e7c077153eb7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksBCRA9TVsSAnZWagAA6yIQAIcqwMKxXCU1+z7xrxYz\nqtsKih8G6RWqq04JDISLTpdDzvDRzOU9NXgKFlkDuw3a0OuJqkdcLPvGIU7t\ntMKW8vpIIFiIgkF0EJpaNLZXuc7HCBoDCIAOOpOp85UaHSm1uAspK4BgKKFl\nTsPb29jShE+KoPIKUOUXP5kSc3V2PIXqgWQAWXNL8W/jYeqc3VZVxUMWpjhl\nZwM8WhCY9SAms5U0UxScfVBK52c6htjgYuWIMpOHIb4rxK8AVlvPJqWIbIm6\n3HnNUce7pygnK7LUiSrWCtWa01Upe3jgSnCj2B5aMai6MjAipNStfMq3ZNZL\nZ/uYd0pKrGh5/R7GpJs8inypxtRtmS0vDJbvQnayqPHsgx+2HVzBRajTTauX\nr6au58vi4cEZEhZW9Ye2BFT4AfOyYqcB/fPxp8kLWbaT1FJGgP9S7UWJo7MI\nfMyUB/98Kdxi0qG5rzJFOyRHEuDoK6RElBxd7PMdBjCct+NhBojdqvtciOXG\nJDOoeBmF0t3I/cAuEaqVwI2VwohyDxk9xF/a5HCdn06jU8N1GCCvxVPRiW+x\nWZPl/qEI/8t2x0rpjMjoBAwwwtRCGGivCrJsmvT9Y1WYSiZHSDnRDa2RKF9B\nNURvGZaJdjFMVBdUICWUdwvuXQsuiIrVJIElCOEmmwzcjrCUq9OptxjTWVyr\n7mMj\r\n=07CZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7XLsA1Mdn6TRR+gqNEzcBtHs/HTcHlFCSLw4GqL0vxgIhAIvVaOOzk5/kNpJDbsJktzpveOuUytuJWzUhRNGL1K1K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.a04c0b82.0_1587170048579_0.7604754670886256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/slider":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pfPIoj6uGzDVGUtnzUMHMaiAXxhF7wDYJGcdwvaj3RPFTx+wdRST3d7Ba1PEHr+7DbG7tSyxI4mhlRqTLFrxTA==","shasum":"f60a88eab427bf717789f13a7975f897c4a2e4fd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetaCRA9TVsSAnZWagAA1gQQAJuw/jLI/DQEfRds4wzj\nvdr2dWnl8+FJe8mLw9ADOIKgxh+sB9zlCB3i+jFlDpQcBbTbPQtZNXUxXPea\nwZX8cOogI2v1r6XAReJv+w0sRuRUtRuqGjexlTYOiojuNSmuHTeDT87AhaxS\n286nBGwtBBBkD3PoshBRl5PuuWzeSHPtUHlmComACvdfFSjX1OxL1mKsBI4p\nKbJxKL1eWcTchz/TQ+o/8NFSTOdVWb/Wk9/YRT7rplDoXCEjZVVfMz7DWHQ5\nr8/qbksmoQRURWyYxPZFMhXSSbgHXjTQcxPiXZ+uGEiM62AtY5hxE+/4eL7L\n9iwya4i1dCz4/kaeny8USSB2ZaPaDIAEfz8BO8j8okFusajEmCj4YS6ojJOK\nNZePc7P+UcDot4wOyNvVeZIKiWOUWxtuCRnJP23qIZuVAYKYBTAkILag7x/A\nzZm6jd6vz7030xinksqJQeKK5s7F/vDn4SHMpR4DeZbFzv6PZimMvWKWK587\n+rTmjMEweoX85fY9vReLAyHEV2dkvSEt52FpwR1kJ66p7KYtJ5O99xZKBu+V\nAZpYvDHteACQyXAnkcp9Cyw41uauYB0QV52a3MMWwxFF0nf84m7IPHGgs0Xe\n4Xy/3oAjpZTvaFPnX2cEdQEM1pci0GJaJnckn9CcR2ZGEuRG3zxsToZMmcof\nkUyy\r\n=3r42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ8Vi2yUHR6Z+QJgWC5KSxlojrhN2rKzr+9zAl/DFYWQIhANakc/Yr4UKrbtjGl2KabFB40T88GCYUh/KIhFHdDPqJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.715decfe.0_1587407706331_0.003115167854394807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/slider":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UUJYc+ErLGUTvKIsbG3mVdus0quEiHRpJDuSG8olA8NssGc4lS150uc3q+x6ddcdBZ3MrobhVlq/cQ939GnrOw==","shasum":"b193abb54d7e12d44b5601052192f9c5628cd230","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":84178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVCCRA9TVsSAnZWagAAkqgQAI47cF4pZZSd2dWZ6ub5\npAYoSEhu0oNtcP5bdPAaaIOMRqTdzD4MWhOskEkdWx7Xjrkbr6lkbSt9eoua\nd7v53IfCle6xR5aaEj5FruEXcHxRYkiwtJOrhu9hHIdV9smyhBPLzWKRX5lG\no9c5f9ks8LsMAlCamqYevEnOZvzaEIgw0dWVSU2I9kqGAWjZGy0RPWJxm86L\npqe0QI1BCAPE0XCi/W1g15qMoJYC6Y1II0D2XnujV7tBAunH9W8XlIajHNHX\nK6IogqWcIWKP1tV6EhOHNBzMijj2PSODOUSULmEPTH4cv7Ofg/5yoL1CTxo9\nHHKMH8pTJmyigV2p+TJmssnXJZWywm9mSC/Z8HoK8RLz9HmRx0jUYIdsDeLA\n5fHm14UaiokyFIptZlTUlYt/E8EzWameWgkILCqmBG0Qzew5Akv3LPtUcpLr\nTfG4PWQk7kZeA5dFLHZbm8YhptFwLpGXKwK89p9M6R2fkzF3otYfSeTTSWkQ\nkr2X4TLJH+TFj3YYYsxdDUP79vAWEnO1Cpj+ej6sxfjMcVJxjbGlODd+ha6j\nHX+6vpD3qEpxVDWfHizID1L1s6wzdusYSYNpmBc5joVIiM8LXy1b5yqKGG1M\nytHbZ9dTQ7dbfmpW5n1g9tWIJpRZW9a899tCoEzCtPCA65lc2CrH5+WkoozU\neDr/\r\n=trPB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRCyAjlkvjY3n0T5svKZFehbnCPkfu3dopaRDFaB62HAIhAP0HYKBRvAwg4aPSjelVKKg7vNo7khtOc9fj3NCC/a6Q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.c862cd04.0_1587418433910_0.7799401166892719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/slider":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iZQT3cvmUKWQln+DXmo/cL/JtGewRt8DkFLSP/hB6nbKgQeBRIzDAwDO5YR48o3pduImX4I20bklcqP3m5Bt4A==","shasum":"f395a3502d824ce0a7df44a78c0704775e907ff2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBLCRA9TVsSAnZWagAASJAP/AuhM6/YtWOzx06dbpBX\n0Jq+R5CNh22br9iazXDc3Ob0wks43/1QWT/reo8nG9vmHjmkyD/MO0wUSBuT\nd8/lVOo/c8e3ZbspG/X0JvMReUysqUZE8fit9A0mQnen4yp+/e0UTZ5P8B0i\nAUKCabKDtUdycffnEvLPArUccklCOIoretmzBzH9kvaMLhD9vISHZ34lPWo9\ngqTKMiWKhI9jMOPsfLyGw2FVe+katsDplgNxJItoSIuL2XA1cMgq9qu+k+4p\nr6SduSY2ezjFw7nqhqEbKn2Zx6W3xOJ3SLJybWGfV3u5x0iL6atHiA1b79HZ\ntjv3SehYVOYkW1TAwG48Ja/QenoTOaoUVfFQ7GPGsw1xCkQt7T8xttmLy6Lg\nlfUG4s8292uNIXRy9MncQnTfzwX14Vd/2pdgt+24G55LoJHK+FFO5JRFee7u\nVDM89eekCaGFDDmm0zmRiGF+3HFILeXTwjNKPaM4a7MprEGzb80+WlrMg5G0\nbustCdoFExFRNokeCixuhYTgn1bZ2yqg7Vshj5bjTx8Ov2Hic8zQ6QNtfDkF\nCbjFXmy7epFCHMT7UUTB0op3dUUvw9mjqib3BASOLUI1iRpFweOQ9g/dzyuf\nLoVt66Hv2y9UxeCyaWs8/AaLnwE1zGQnMeByUXDNLgHQLlMYIf/95DN3mMUa\nLvDi\r\n=B8Vf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3l58017SwhfMx4kt0pnelIuCzB3656fz9YfknfScdOAIhAJdWHOndyro1ot4aF7mCFL61j5OXxT8W+tphKDbInQMO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.e9b01b35.0_1587425355407_0.7451685679183417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/slider":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0xDq5bBWnlbvtPn4raEUTCx9zpYgZ1sM+eaHckfS2bo0fhX7zDqSeLYJTSBGNRx66OXijhLXnq0E6qhOKDPVQw==","shasum":"2355345c496919fc64178519afda302fb0a9c358","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkN3CRA9TVsSAnZWagAA+ugP/1vtgzM570LYcWOr1ziY\nZmZVSsOuJcP9h0JJeE9kzILF0j8KiTZ1LvGNGrywuzFXZl2GG+d03KgOIola\nsY3RPgjIFrRIFdVkN/Ht2HfFs/X91rwq64Hhv2N4CYMyTf/lS5VgWgKFzXru\nAJIrQJokp7A6AFyxpNxQY+Eyl8J2d/LLZK7CkHQtnc0Sxkl1rY2XVfKapAUD\njBVWWYmUbz8uHHeyHoIk10c33Ny6Vyno/w9X7JefUcDUy9KSTOaQ+XhYZV65\nu4AHbGcmCnxRHu2WtdufY+3XI2OX47GZDWiXvNam9LkDjw0EUqwZPBT+VMyu\nNvHso5PnJgzUOcR03pDWnmfqfQSletBHeY+lL8E7cPMWdaSLBRqYvSJBeMVK\n+f9FPE11hGshGRJzSahgBHLqT2GBgcvn0h9mM0BKo/oBSE2YzfqcYWPFX+LJ\nh0QS6mZoKns0zfTBKWzmUc6JEXZQsFOUDZeuwPaLyx2MXBr1wrn1D6BzlJ4F\nVooJuQhMzR2lYobsRKe8sQNLzmxgHFmrcMGhY0vxDWr3jSTqnRaelnBusLcP\nVTdlQug8Fumm72K0o8ndNFmmYHHHvABqeP7+998ANWVZZzCn1cM5go5EHU2/\nZxlLRFETrZJ+YRcfLBLpSa88LyMs88ZD1lfX5aixUgbEwlFw87VyyA0a7z2R\nVGpe\r\n=IE3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiT5LmssUQjWRK4FpmqnTccU3ePMazZaODaxCpXfqQwAiEAr2fqezOK1N2FZ8NEirpzltNvGga95vMukGkn+jDMcp4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.ee7e8989.0_1587430263269_0.3163695756918101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/slider":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9t4AUozO/Eoh7wR6MQJ+QJqo+/Uu0V4G6W92F+tw8enHy1Fvw47AQ/M7K6tWfhhrZ2NFjCLYOxBlDZ7Kv4Ooeg==","shasum":"58147e94458aaa52179fab4252931194c5c729d5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz11CRA9TVsSAnZWagAAHyEP/0x340Fs8L6eE818YOtI\nXWKXfKVPUMlGNRGbq4EnKUgTVh57k3qQRWLXysWIcGpvHSLJr1/vPCJ42aGl\nVg795u0G+DI6Fc4qQ6qFiAibrCg5kRGBnx5jtbwNH1jDjMV2SlSbCZAupgXM\nr6fZWwGkwaZZcQ+y8us3aXaouapbsMf2JTY7Cq62SuxyphMA21rkt4W1fGsy\narnwUYQbUQMk2E8hmYTj0E0BDQfhg7qakUWA42tSiwTeqlR1GcR7vVDkoyOO\nxES0J2aXQx3t0CTBNJGyMzuLZK3o9VNlQrHz9vjq4InpFsqqxj+F2/Cyw/ID\nY5FxeGh8biepWXWWQ4/liCyuykzx4VZQyQfJs/gFTfleexpxvH2YCzPZ7IU1\nCrxvNr70mpYJZWUHz8SRpI6uDtTHxec5e/bRWRcSeOhEin0+rBcWb+8bJQSk\nI1E6+CrsFww8FXn7KG/7OWsvaIJ8skzmyIcLuvNoaFnJq2pUwZHmcWVJRpSQ\nqasB7OsjJaWJ4gB+AdTfeHKQcdbFyn5GE2wTqeUQBg6tT30vxrVHba3sRC6X\n0UC2yZLl8M1hB72KzRmP9fCrwUJOKUw9SOvdJS/x1/N1mtghb7qQGACQ4Q+5\na091qiwT7+wCJNqyQXdPLyL8PbeE9VqFVvM+IwrlugxDeU+vwbPyO/K6sFZ0\nbkYL\r\n=pduL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5VXq02Anljuk+MBglgMlGCZxoivxpaqP6G+8eTChjagIhALHFK8sMkMEYp1C8a7Zm+YL0cjHvaXjI8Gzgeg8qT50y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9bf47ffa.0_1587494260473_0.20993676202444567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/slider":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-86LitNOHMSGlGPVWxVGREPMVb2I6DV7F3goT9XBS/hUix5Mx0VqFXyG5cH2Mab0SB193Z3tRqJH6vd4jEQWnWA==","shasum":"fdbbf1901d1957e0b3edce88086ffca25de883c9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GkCRA9TVsSAnZWagAAirsP/1fXtrGys1assuH2W3Sp\ndpS5wCSFpqGjniWihHx2Q9etibDR3WexmDIvKO5STcbECfwKjDWq/APRMVqi\nssBcrNsUNftyEsZGjsayNW4mFwRMDMLqPDggkCBAMlY0VYIaVmdH/ZfjOwi8\nq7v5F4Ng1W0TfEAgmYbGnRjkKFtVBPGn7VzW1kyr/dMMcerMYdkxSYqXgRB5\nYu+zetfP1PZ3EWZyrI16EszOVsB1gP2qIGpTAIe3RVvMxjTqxHzMVF8zPR6r\n9RuC8BGfhS1IDpz8UbKbah3/V7lYeusFcFs+IMQ3y4LLOgpQtolfVFtSMZZE\nPF5PVNOgHkc/VXVYABmHMb7SckU/bqCqlhPzBogBXk2GSngRxrEL/LsJooWY\n5+3bdXHWgXjufpx3pEjaEg9dQOjrUfXpBb2f3JZC2m9LNOzj9AVrWBIeTZxq\nMvjOcX3mvS4dAEQ+sjiXBE38D7XXTM5PW55YwfKV0OawZSN+C1wYVJt7kiS1\nYvkS78Xl/KaK4CN2xuDc9brmOKT44FY+RNN07GQ++0wSMKxdvAPNu0XayM67\nOejkLaP3+2sex3Ix2KTocooeOpCF3QjKgj7sUkKH5Oqidwo6U8wTsc/WJziE\nLIrXh2Ykm528h80HDhFFJTYsChztYXgDwvMHIeKExU2J8Ej9mZZpr0qRaTs1\n+diA\r\n=E1ZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2oEUO+czkNKE4vt6v4ZiT8Y7saspmQags5/Nwhl446AiAvBbmaT135BvUYiXf7sCew6anNNy62w/CXi2tg1OcBMw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.078dbd98.0_1587503524420_0.5156200731640883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/slider":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nBTrMqiQ5YxCInzyF55MzEmHEvBDVHrptBCn63L9DLf8ZFogiPbmvmC9ihw1PGCDTlMeWQPz5RjoAEgm0g+N+g==","shasum":"d94df54a98547c431d144fc2f78e53b1c5c14b2b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cfCRA9TVsSAnZWagAA1aIQAKDbHZUifCsJ6Ngtz+fa\nFwMr/0o+/oUfjEAEt9e7sC4Ar4m7bl3zx0WIbrPGKH9Z3gJcPrMVIcJU9bdD\nPpP95VknmgCQftzqHa2jLdHhNcJV5rk3C/kYPq1biYXcPm8peT2yevE99uRi\n8WeE/35ajLAfT9/5mYZlXLsaJGy0tZShGuBqWIXCWCYM6W5pc8/UfKJ/+RDz\nlFQCsLqcoNEE1bm2IIuwgFVDbqXBBPilH384HbU4uAKJygDaqpfhE2kqCtLF\n6wudPS3/0lJ3ZX1H+DgTLF0IQwKsReOKa6NtK8ephxatVmxs/9Zg9K2GKam4\ncl+yV50/Vqel5t/T1tLcn3hvQ5XufcwkWlLtQuf3mJ5kxxjxlplWJ4Lo+h1x\n9Sy7lQcMTwWIoHYWt1ZF/9XI9Y6rfoJsi47Q9i1KpXMW77koqGnP9UGI7agt\nURekWhQfR8//2qCliLXDDq/MQxTvjsSdrcg+hhE7EBubdgrBrU7S1P4L72x1\nk35jJd8c/lEc7U/LrHhMVZR0UxyFHdt8atU9yPJp14HALI1VfoDY+bRgZdMY\ny0mSNmt3cG4jcqsScrh1HkdHyhS7FNDvvMQ5+uMsmw9VOW2pVGdmGtGfRBJb\nxh7BHVk05IIj5UXanX2ODDoBLJS104NfCpavT5J5EOL7mxngln2Qz4fHIhCl\n89qx\r\n=hlOZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7Ovp4uIsXv5NrDDbq2O8CZPgyWGS87v4AfE6Q0o8DpAiEAqHlh0U0DvQNkhLCm9fyob3Y+7cbB+KfWNz6E5rbsdKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.953015d6.0_1587504926517_0.355462723674691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/slider":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5I7OYLsXHtnlXJkC8KKbMv8NUVVvKs/fgkAQeKOBJX/rHl8KOAyPd3s6kd/0B9815eTdGfHTquFai9NkdSuYGw==","shasum":"bd4dccdd53675ded30a7825eec541b48edd99c4c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yUCRA9TVsSAnZWagAA5RgP/3Ua11is++ZfK4M4B8oq\nxsX20IZPILjLr9yPlbpMcUvMuU4hn4Z4R3tDrwUIUXp63h1v5v1pOMvuK3SZ\nfp6YV9gPtKT1CXtfeCyo81suVSw8tsEmTXzWbeBwKzOmCFKEwtfQVF7zclJN\nQg0xZbqfkUE+MnX4WXguPJG6EGTjjfnDQyWe4UAoi2uWYR9xGNnN/073YZWM\nsQJ/OUM/3MpqfzDwCQbyNm6JT8SzMlAHtMZXvCbDHOAIcH9i1K5STC8TM5jd\nLmbwJOlb6NgZ2MToBFpk9NMg/0Np/GGlU6lTFqydbEZv9w0ZYeqylgQtm2b5\nyA3xLE94gByCeTKC3LNdS3op/4bUut3p781dsAO91dZjqb+klyUhEtXqqV4Q\nV4oqRVqJZAdq3BgIdjHiyiyi8X9EXoGCT3PXB/62xHn0OglNUbqre6x0XEgh\n7GXXjb9HwQSKo5LEIpw9dvnettDMQTPGW2Gt9EvPZ4KqNg3LE24z5LHyNdg6\nyzV8CvTSkCBYoaYWtEqXyht7+DeTt8B4LglbC5zvDHEU6gPxIlA/lWhX6ibe\nRO4XOYGoAXtHecyEmx3lZdeVdKVwSL4aqDKqZR/fZYJTITppj1E9KsufWaXd\nHYVfTjq1cS77mCI2sIzqUMeSpGhYm5weoT1KgVMTJGalR6iwNvR6rzNTeykf\nXghg\r\n=3XGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkixcPaJ5z2h+lgUpy4iYUB0Ghb3L7UDvfrcHK2xQqoAiBGs03K3aWDf0fHCzXNTW92ytqB20iBKzIFJLBH86cW4A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.c360ec63.0_1587506324192_0.8444023613933733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/slider":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vEq8KwM0+gI8GWr/No04prL6OSb8dx0MBla5zMqsfcMP4cm+GFK/9qZRZ+b37EwhfpOlV/BoiLmPx1eisxw8CQ==","shasum":"cfad779ff44c9746005080c8461b179a45a0bc86","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WqCRA9TVsSAnZWagAA3EwP/iPjYKh+yE3Z2DCa1swq\nZmSW+6mZ/U3BrvhdVHmtkyok6BHqeTTaO1fuiGvlda5PbuOYSQac5NTUMbpi\nmhE9ipNG1SzOBjTr5KZAqD3F11+BELPyKMWjRLx2n37TPPu40J0XuOV2cGtU\njssb/TmUDLRnnBzKn/cDyMDzw3zrXo46F0n6lxBUj5TtarcdE/BonzDBbUML\ntH5ycWKS/WvOJJkY8OyR46RjZoOEVpgKLEBHRDXKqq2q5osO3Ry+V+9QAOVB\nINuVv9u7AJECX957dani87U18BmbkTLepz7ihVWjCVYYD7ItH1oMcsGpt3ir\ncUeddcv+EB/didBl7QHawXDm3Hex+jCGU0z2lilqN+e9iidBoATyxH75WNXn\nWWlNpU2Tqoo5RMBvLsgl73bFeit0HGVwBqCHvg8zHDzKEsRPObz/O84HoX1l\n3PK8lge0TogrtJ1UF9z/ZLoxu7Hc/fvJ5FrsDHxsdKYG96pyURYe5nrf5tQL\nlt5zhainPkM8lDBkQkXglrqlJaEZ/ekMlaQCx0pKXMhgcv2aj9oCE+5FnQ3v\na307cs4T30rmlZnfxV3fafGF5k1aLEsDGdrxHugvmNJC7ciRButbeFSlxvX0\n2e8v5YISsVC6OCL9q75DzwgSqslcvcwZTzXoLoeTYOSoU9nkWH8TmY+N4195\nAngS\r\n=Pc1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsbU8/j+Z6Ck3cFdwFbcjimiFT7CjbaqU4Hfz+Fle9tAiEA+j+dYMlDEemaIBcHtGTxcPqr4LwXd9ojd6fMGV7Gy80="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.d71b65aa.0_1587508650404_0.20110178598417106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/slider":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RsCffWiQoHrFb6/pYPLhIN8dbj1WF2Sb3Qz570hJKdur92RylrIfEYcZvANbr7bwwQo6gCdTw3eBb65QDEv8Kw==","shasum":"bd16aa21aaf39ac0e846614c194422351b47da6a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOT4CRA9TVsSAnZWagAAf5cP/R+lG/xxDqD0tt2yoosU\nuju5xZWDEplJLeSYvqmsmaLKDqCKsdOQwU2P/0r8UkEkUUD1Lr5To/3xzkq2\n1vIlV7stEpp6ZqtBNxB7xDaCuh/yUOcWaWr4DZ/3q5jbhIp07NyHlPLvmw6k\nEe6Qr7x6EaIoCusIM6zbLmFjpv+kUw5cZxbn9/wrmlXm1JjvIbk/MwAYT/gy\nYypkjYJQMehDBaCJiUqfWlth3nxFWkPGTNyP6nn7IplkUeaTQe93Dn56qymD\nOjcGQju9Lz2Qv3zJQor27L17Na1yG1e0lz+aO589MsOLi2Gx/VazRyuZrt2a\nKUfqa9tpi1G1gpW3RWHZUJ6PWeazMZr7/QcBuoJBjRMAGxppO97sBbiIiSq+\nuHLzWr9x8+Q234JnBbKA0fLjeQzhJetmvX+FEgte+3PB5mqInyUfOh2k3/n6\nhdRmv9Go4evLeWCY2xkeNz6pycH3DHVMTIZu97Y1TNeexH5r13sv3Eq4SjfN\n5H4hYEkd9+Yc49UHtcrpo1PMugwWcz2wXRn7tqOS7cOuAzESU3rrMRD0CacL\nEuZRSGJ6XpmQer0nJH+nXn6KceY14l3mjmKgPqeGU3yYW6ev2H5AcAppnOFE\nZ7UCyEGnFyF85rkGNLRMzAjukj0J/OwQS/QUkIcCO3XiiGe3yKmNgvHNwZUi\nh7X/\r\n=9tVR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyacy9MaY2QMU2xpSH5dhW8FHZ/SrmZ/c7OalqRAqx8AiEAi/89RdJbQSOXH0zykFCheCXs4o+OstnBQS+D7uerpyw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.58d51135.0_1587602680443_0.66615487477789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/slider":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9S8DGhib/GD4/abBr0K83Hbxaemlpy+Dm2/8dzQUejTlfEgzSunyFn8BTC+dtGRhyMWHHhTq82t26+dZDBzEaA==","shasum":"da2ab72edc00d839976afa3d511ca78d78cc8562","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodnrCRA9TVsSAnZWagAA1+IQAJLzklXAJV+vgqgeKHNO\n3F5VXlMZN9NS8RWQhiDj5rMCKfdl+c0hwKGOzwj9OrMCPH6B5lohwwpjaXbN\nw4yTgHWZoCVgrA+YpFWHobxMCxRy4Ag6u0QPXl4CJM9UvRmHlmIRW8Cy1q1F\nWzXQAjSZcxjzZJrwuKrOHOV5dfOtHixeBTSsUXF7iV3OgCLxpaOUwJEe0NxT\niXIkR95t9pSUzF3AYlHVA/ZWi3Yg5p0lX/NUWAtdDKAjtcVkKdAC1QY9l519\nvUfgdYeJhiKUcjiuPTELrFGHnFKSYp7tC+hHJvGurCl+j195uC9ie/8VnhRi\nm/+iwt3CMBMyoqTIBpNWnrhYuDHXxKDbMLQWLRpobG4kROf0zYtfxlinkT+O\n2w6XbrFNIMDqSE7OpZYK26Jsh/8Vmthh0UaiAtOQXalvALIyk1Ckw5Rc/t4z\n8NuDRkqnzVa0lt5x0tEH+b/BdPezXpjF1M8+ZqalVqC/uq2toBnh6VzgjGgE\nawotDOCNdoMFIb0KkLBxESg+Ajt4lvfAATzTo0g07rZaUheBq8BW4vg1cFYg\nyIdgXsFl6Lbo0+qr7mr2X1sCRdEdzjJomRmPTPls/HNZNRBtfKCrvIfRysNT\niuwcWkYNhbASWZRKs93KaIIXJfSMr1vgLZQSDUQ4t4+nznSwRGjmMBnvPDa8\nZGcG\r\n=lJ4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRpxFiVxlb6OMzKJAGbAjpKNbfJG5D/yhd+bkBt8qYDAiEA0crPxSzn7Q75E5Z6Is9vo1HvVjRb+ftLH+GM+35/lyA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.d0af8ba3.0_1587665386836_0.08762756906923541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YMYL8NvTFqBZUWvfVsv1NoxpzOEHEBxQ2amf+rAWgAtAZ0dyqMkfOfzOtCOV4l9v/9uLM4VJgOP8Fd3cBZU+WA==","shasum":"32b5a26928d7e9227fa03f3ac592bfe98923629b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1QCRA9TVsSAnZWagAAt8cP/0VFVnMjw+UZM8+ecc9G\n4ThpGIHyeOl83D/Z4u29JV5lM9y3K4kpweAitZtXL6P18Ze8WLwL7o9xDlT1\ntIZkfLmdSx6lWiWpXgrhYJ9xJavFdTdGeEttKDMU8lJZwKovg381TkQEL0uR\nJuL2F7Ttp+PzIV+d2s18Av8037mAfdtciL4agczkCaIfnEwdWW+SWbWVh4IP\nrd0u8/TBC09We5K9tTV8uyLmPKd9NpR1L8bY5W3/md8uy59zeHWs9KOsOnQG\nJ6risPuHyFaxubcE0Nz6si4yywLSZOUqEcxViJ1jDcaEm2QihuKhiFdcT5Nn\naTc7bOet0TS3sQ92sWqjHTAYS7xq8VGXDeJ6BnwWEwXwncsr4++XBud3RGAw\njyVj84WLr1JqrX6EceBUqUP+wzt1hXhkR1ZsWwvkF7nvC/yYcGEI9gkRKaNH\n9erqGn5TWkRvJhiGkiG6z2j5jkTnxC1XBLb0FdJSxTWWQAhQWLsJnU6v5CH5\nmEK38taSdsjFXtj1XV1+gnovgmbIJj4BWoQPWzWRLvPzcO/plHu1fItwz12h\nsNR30coCEafx691nCMdwVuRz6C9sSv3ZGsqBhH3DIhFj7/vhouN3uzUXZ9pA\ncxuAPaMYzlM6LDUz24FNk92Ogwx5caVqgy+hSYSnwGUQOQnkUSv2n20eLvE8\n1Flf\r\n=NJBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9dcQTOvWF7bMprDlv0mpSIjftdr5CUFkNVOiJcilo3AiEAzOlgjKl1ESwyN0ZfFuCl064K0VW2XDssxJTwqBxcxwo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.8872b17b.0_1587674448412_0.641874703999415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+MuuKtPzihee5bF9iN+bJAvUETBhpOjEZ427EXGFyQI7kdacDPTOC5bJhcLNNh6utcSuPW7UcArWQ9MAaPhZZg==","shasum":"62e033f78b742fd12a5e3c5d6d1f264516261222","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvXCRA9TVsSAnZWagAA7QsP/RREB/yUNFp0VpTJvkGa\n2+UhDQOuEm99cVL6Sm+XIoskJCqkZ2EU5YsQ0SVdhJzXq9UPv33DhSGXF+8V\n1aAq9MspeNvPV0a8PiyhSUmIb5EmnX31dc7DuJy9Eh5qqzGLSndfWt4LYNeC\nws+eUnebXgcbRUz6cR2ACaOPex2RGp4Y0UuJMx4bHNgphqcF2y4++K0FD/hm\nwOOdSBWjhJzWShyZ52fThfNOTqcAu9kRWU538f65/w/xEUn15goW8v7qVg4/\ns0OOLMH6FMweKsabxP2kKvqG2CqfvRKDF/egEJBe3sua78cqNOFKcEfbTPbW\nKx5+iEneVBk3w7TZrWoCF4qUUscdrzo6Baqf3tBf3YqgK0aB9TUEY4cvo4KT\niLVNstL+JEweVt0knVT+wZvtKGtm+7Qg1njneIXEPH/+5ca4D7/LVBDcXO1+\nQ9GM9joMq92QmcnENc78P8mIcU0eF1Mz235ioFP9KXYthLM8SGwo/rU8IN65\nD3rfmzhilcqth7I+/UaMPVclXPMELs40sa0TbHHQ6DlaxZJrZ97iNDh4NM7s\nqUiTBp/S1dIZuGWq0tycn1AGybM0eikxQBYY8lPOumgL9RVKrwqWhY7OU+yb\noyp1NmF0gUcvqlAPuPdiwLEb7h95Qt62bwi+zC+F8W4ETT58npDZICsaioT/\n+vcW\r\n=0qWs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgym11PAXvPgu4ltc786u8nje2J9oAeVDXa0Ao6KPUEQIhAPV9QUirumGQm9p0puFNLzFM1QqjvZH6uHWzKGJoi1eS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.eca1a610.0_1587678166587_0.09472826995337669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sLpsLgFmAgvE8Nw9Fue1xgo16GZpt7SLyB/nYeUZSGOMAh+jcaxp5S60ow6aFsVdFkQBw0ZfEhSC++1Hte27LA==","shasum":"02bb05325717a7ad9d5a7d62c0e556022eae27ae","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohoxCRA9TVsSAnZWagAAWFkQAJixWRmGKy1HC+C+mJCW\n742A7+mop3JAwr7TW2S8nLTGVjGIyJDxo/VOD/0j8aVvMfZwiTweDz6moiIA\n/+PZujOg8tqQr6yU5n9bG6toQdGzwFIJYYrI/oFlfGj5bOPWMdVOjHrsDeDy\n/biJKawcYUfT7MOVpn+Y/J4X5rSAdyqLi+X10hJPGGl1nncOKpYd6bW/xOUD\ntmgfzzDFPgCvsymXdW2Egt6mWP3BZfBjupM+ORnKcIiSdtJELcuuSzaA6pIA\nhxJh3w7FspGzlEeB50DyqkM4EdE2hUFkvQHTPFJCloM2KnMvHRSvZcIMQNMY\nqnZXtZun9WFIePMxsLYE+EiivvOAMTGEJ8oLtFNn/OASVWtVj0TYTJh6yox5\n352f6LKg7xrxcruFcy8PsHLLNSDbKZhS8m8BvT4dmvzhmFsCV0GatxEjdKIM\nY3EE2Z+Q+04NKnrQrvu1bvtrjakJdrTZ9SZI396L5wRa0pH/hJohTjXiiQmM\nfA9yr2yGxMg0jesMEsiQvRHXTCir7W6T+aqrG5tmWiO0U4fUIlm9ri4TUxv+\n/RzIlXawe7v9ldOB+kZ0jNid/GPxsctOY2zq5GAHcUvy+F0Y1X7w8GO9uKcK\n9MFrgmviaBvGkJW0CJsFzjGul5pveifYOaanfS1g47z6KvEElYWHs4Oux5Ee\nUril\r\n=q+Vf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVqNhMKy6Qvkma6EsFSBSk9eo85/ASM0YGfq90CH/LsAiEAqlsaocAbhl/PZB5utaH17xTJHMujOappA/9B3sLRmog="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.baaf529e.0_1587681841280_0.9844192601576043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uC9ztQB17Q5hSwRtqFkYnw7BXwttwmF+KV7iHbk3K8LjZd6RhgV+32Kj5kBdbCXhv3Tq+zWgNS7ZYD62BuQvFw==","shasum":"8c8a2590dfaa6083238128c05122f40b1da41c94","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiE1CRA9TVsSAnZWagAAyioQAJGZyr5y4iaAYCiBQA2R\nmgOVeKrTIqrDiNbuF3z/7I05li/8i4ZeQvIpFUsW9L88P1shefycdVoYe1xW\nY56SEMewGagLPS4RUGq0jden5Qfw4AUF21B8tRVPrLfUvPCzabDBYyIbkeE4\nhDSGl0D9nhcsfcKkB3lSfj2vSHvTiqMJvnVwtflDG5nEFTGyYHCMPaHJvPN7\nnQoV4SBem5RCvCGG9aHt6kOje2fjQG6sewat1PXCE77yseUuCrBtRxaQXGz8\nd0QfUHiHHMwZRAKNt9Lkk/nRyS8r/aTy0jkJwjz86vt4FEbJsbhEtEMAX9gJ\nmRygudkgFfCs31WHM0gp6SdrH4F1BriZ0wu80YzDLlq1bnHkYAaD6zddsKD0\ncgpH+2fW9zdRCsbpH8SAiAZtsIYWKE6uzJxSYcmbwLPLgdLntL6eHWRW+kbn\nOKBmfImFpZuUw3OajwyABaBFD2EDrZ49810YPBckzNmmfXT7dBH09zhAZR2c\n7QvMV5C+K9jRuX/wX5B3yTa/IvQhvgw8rt+D8BA4KBs4bZ+SSvGkbg3DqDxD\nx4lKIEsK90u7aT+Q5P7q39hE6rXTR/B7kDsHZG+ER2HuAn37XTbhUoDv4ixW\nhJsOFXe0TAq9fbf1PapuE12pXl96QRFfYoQotdYkKgYd1m2USR+11P8VeK0T\n80cE\r\n=Jzh8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETk9vLSgLPI7sR5c1y2+SCeBLL91lICkJ4voNhGXDtFAiEAoIRHEJ+4uJPkriuUGWu6S19hHTo5nLjifyKBYbCvrGc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.7a7992a8.0_1587683636558_0.678774539091141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uDBCUf5blHunU1BW44Q98Yblio1OCuToR7I5y0Kx/eAQEdcabvmzkkQNyS2qHoxTeu3bYT4/gMUAheKkfiFORw==","shasum":"430fef0394c6973028660e48546ff33f2101debb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBVCRA9TVsSAnZWagAANSUP/2STPB/nn36tCexCFF6T\ndrOR1yTg4gUKm8VriK4DbJSNyz2x0Yf1F4A8tDkPlX6rm+YZ0pmv5unXdaMu\n60FKLOP5/h6SMIzlwNt/eRy38G6VO7QiTo2X/vPv956udxmw9zg0mDSDXPVD\n7SnxZMHR7D+RC7pycLAl8Biqbq1lPp9Yu1nEwKI9xMuYKOdd30cjktfXaerR\nXisDM/edUoDL4F+mSeyF/xUPHMF1cb1ktCuq4Mq5gdHM0o+TwfFKDbWsAAT2\nsX0VZvJjChSjzG+xOBXWQHsyxhFrRRzSELy8xo1jrg1oFlnhInrpwL9M9zko\nKIdepmWBjIl6RdCgqCOBnNSYK1LTtqaZFUvcougqCBunE+fOxS1Gi+uKSn0J\nvL6QoZuKKo6Z3P5DRVyOjAUnKZLPZlsJ1MCIjNkjM6Bd930/cnLjl+UubZaY\nE7jz3xQXJCvFd/0issbxzvvFm9da1OaBSb7NS7WLz0PaFX724+8bor+GRXbO\nzAfuuIJpyk6XPWaF9p/ntLqhE2EXoqXH7rnA9uumTTqS1K0PaGkCzg5v0pSk\nsOy0QRmypiVmO/ymwMW2XXLcB5kq4VQFiO2xtfnO8wvRARfRpKkl15z7vcyi\nDaCAuTf9XbOQEw0M8a2vaCfPwWcVlRe2pPNeT0PJjyuQBAgyowvxCtig2/jJ\ndfD9\r\n=rqgj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyEGPeEYkR7aKg6HGJgt3MmzW79a6XfWRAonXAp4lfDgIga+gNI2vH+692Sr6a0smoM10CmrrV/nF5FQIO2CvP/oI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.1150d64d.0_1587687509222_0.8951756074769612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tCpD5qd04u3Lh7tB0/70Aq/6qzK2z/cL/kI0hVUbqUOb2pSRxCb8G6Nxj4/lh5nQ+L09C0Yucp32sfTPRjuUhA==","shasum":"7e27994079447905fce0f12ee0936ae7bc8a7fd5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4d7CRA9TVsSAnZWagAAHK4QAI5nwcpMNLRmNDlFSDy/\nwDSXrOfbZM9VcvrA/CMqUpzq0gO/XA9+rWzcw0I3rehtvwJU8eKTX8OWDJJ1\n49epUfkfT2DaZgNpWlrmj+TIFmy6oLLRtTYbzO/24JqJXWETQYvqvXtvZa7k\n8Ya777T1BN+qp9PYciE5JrOBYQOr0X8NXC0toKIVGZjIEpAlKZbnek4qPDPh\n70lW3EJ1IvDCEKzAmNjGG+XMRsErcZYR1XzOmwKhNYO1DGU0nyFfsyPao3/j\nm4aA+p4LMPHoWzajPJHUjXljOeHGaJUojoYYBgN6PIIKJWmv6hAqcbiuiIHF\nvpkgcqb5mAePTuvXKLKmQTOspwxMRNQll46BgH+RsxaVVB2mh2D+MPqZretT\nYPwkR3SEtSBIni4lpVnIqLnk12SVq3a17135Bj3CCDpZy14Oiir7zWXNAwRD\nucJcPE2JVKjLD/Rr0BW6N5WNxwFsnDY7x+G0ipRUycXBN2lnc0myBOkLYqqP\no2oZIDUYuTvwXIsUtEQeK9tOs4m74fRkl/Y3Dr3IRdRD+va8C4AZ36tskqvC\nph4c1TixZc2Z6sjtemTiqfXFcSGw5G9Kcf2+mpBIeGuFAVvoLb12d+rZgEQ/\n1W1V5jwCt0dyfBcuj6Q7W4Bb4m5gbQBBpuIevbDk2gUxU6mDX7hjV3Iav+gQ\n5aqU\r\n=wWPd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZ5XnlmDZHRKrYnX7QIvDCVXn9/aWk8eJJSAcOnyMsOAiB4CmTg/6katFKgQujoImWwONPv8Pgt4FVOsm+yFUF7eg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.dad3f828.0_1587775355378_0.3569772508538902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DUhIeNe6nG6C5maUyH4pzchiN7qcXpth4DUZdZYvM9Yho3pc5/6XLFLwdIAc71zDGXXbbe+WdSCCTkI0TlIosA==","shasum":"78046885878d1408d868f89fa289a87bca8bab03","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MDCRA9TVsSAnZWagAADy0P/3DSOHszP1HfxommZvC5\nTCGrwH+dPwg3W0odb+il/sMlTZzCesFv3J9cetes/ngZLyhO1ZiWgrT1HglI\nAEuAHpzlg5YiWbsO2mIzhgusQGXQv6104DEfKeXlJYcnniyM8PAfZsvbZhyD\nZLEMZTLGHP+7LT1D5qIgKgY6un4Fze2oPlzZwHO/SBtHrXSxOuj33qikkAT8\nN7EB/+IwTi8JfOGNi2gfbPuZVBtRey8qJicCHdVbxujRtdhWZL27e3taMIyW\nTf8r71wcqzeszyZ0D3BMShEnMWtYG0CDNuOiTLo3HumSjs8b8m2kOlvmhdDC\nia6J293N8w/CJwbV5U76SrqD/+ecVDR1wkncr3Ex78VVugt98v5hKKU9novr\nmIE0pgjqYDKD+386qQRZb1NAsG7JD7pDYw/T60pLLqaOevThVGqcaOuwS1YY\nL1W07Je08tnCASOhkroU8JsEXvwBBFN3LmlrM793wbDKdPnwAS4C7ixquxsM\nhHdtVgkyPjHuXq8muHjyCtaGbQlRyIH0LBiClqdoeu4+DfusCudRFgPx7CtR\nQfxBD881OtFGNWyZFfDnhlbW1bO+phisZTv9lzf/FOF8bPciX0V7+V6smsT6\nOF6MwCn8fyZETBycJPqCRD2k/HBl+3wom8NgbhzZiO7aH0jmmymU1hlP+MSU\nXqfw\r\n=F2Bb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmQCapmUOHnrloeMq0YDhjiYfdrhvxQZJNwQK9nzhv9wIgZhlzJ5u0pBuictEwQ1/SJ3yKfcUIuiDA7nZQ2j3luVc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.1bcdb47e.0_1588036354879_0.2925930372333583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/slider":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J0QScde+KamAc9iVEptNLMq18lmDcJvNcbzRjboeUCNkOURA9wsm7kjViEMFhRUl552FMacMZRMecLCdcN8IPA==","shasum":"b1e102fa0a1783a1667e585644a22547c8cc525e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5siCRA9TVsSAnZWagAAYsYQAKKug+IOgvxwXfgjtCs0\nWbSjDUSBhJ7i55pW4K31hx8QfCQisehlSXrqwvSjd3+rS+6w/Ab7VgtAjevm\n4n9DO5p46NjuUax30FnqjxTmBg6air0nJ5kkKOiTluUN0cJlNPIT3Ddct405\nGnwLtFe3uGfuwaGqugvmPJgsGjPurEXEmIRCQhGG9aHH0EiW+rd1B6M7rdvW\nQtsnPc5DShhMPEJN03oaVJF2auvTxRtgkZ1vdTXysLnAMO6JrqUIcym7gbpk\nmKyfaJSW11ljn4/gKBTWJC/K8hoTyljKTB+09ssbtKrnUT3sXG1qd59Vcdki\niUcGGLqwIQCnKIq1BmQTLx2m0gyx8rGmhk1NywFy+lqsQTLdB0avmQQcKlYW\na+KyWn7AUn2SbLOc/69pCmacNmN16BjjDQ2uIlxxIb5+Rg5JyRKf3muGgIQn\nAcIRaixFk7ZOiSgpt8RXvhu6kLSe112psVX3Cy3AzsYmsxvVR/C7R+9Oxn5L\nQFhmHi1ktXtxuOFpv4JwPjUQKRH8WKzx7k2r93WZ4HI9uYBSI7WXY7fom3l7\nvTpK8mf3wsn/nsrVMHrOD3HtLcSrxFgWr007xzZk2otwtYa3XHlVH1o/qV6y\nQFR/y3w1dFeV+kJhga2H3AQG4XAsg8KGBA2ZoeQ4eqv9dipK2RwhhvtPxZ+z\nPC+b\r\n=QEFD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbNpu2e1AE9868J/7vKwjb3ohltrnZ4s4y0EKydzkiVAiEAlaG/1HrxOY0zaVJQXlPBX1pyit46MZ3mQRwD74hHfBo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.86ff1b9f.0_1588042530581_0.7323917636392376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/slider":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7Geet+0TKVcHGvck8nk4ibM+ihYJVykrezEbtMPv266lizp2y4C9PoAFNydgvOnpTcbDulrYACqfAV9Puuv9mw==","shasum":"2c32a52edeb02a03aafc910d4c3a174cfa9cf12b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BbCRA9TVsSAnZWagAADAUP/1NUnE8HQIUBBouAcmyx\n49BOghiBXY3rTufCmxPf78kvqqw+ehjBNwT2qlJpgRO3P7b8yIsDGK33IjeR\nzMBB1P27AD6hWT2oZ1eYgF8Gha6Zne11Depcs4+qYVwxDtzrApHSmdDL9OYE\nUWuwhnnV2ti4S8Ji2ibMGgVo8+dRT3o/vxjfuncc+SNwsJ4OTy/a2PYN5Ihp\nU+3lKCAx/JnRqaNRx8wba1A7pl6CJR6Vr02nS03tHFQ+ichsEa7q4zggb8/1\ntbvcCAJutGxPBOuZyoX4ijquPPcs2B/pqTPHk1f6YwO+Rnaq8eTQkvcjg0SM\nFcKh3F71cfPgH4ofrKSZr1UrrOIs6s+5dJWxyGxu6xVRfJ43Rgc0wCMavcsO\n8K/E+YuIZmV28/CWAoL8ZShcmmR6c+GYH5rvcl9/tR1jcfgBB1f8o4KBLKs2\nmzIXYq0qgVepg7kslHswp0U2Wg7gMrciCjBRq7fo0bYfDLRbm+GLWB0KyWAM\nweg5eX6UNnn46Um4ufsejGVyvqpzwKIN7jKhiqMnNT+FLUI5+5ZSmLJtNS39\nFSHUv8jjkbhNQBs59MD3i6DsjVak/YJOiJJ2JlCYYzz2y5jbi0W2PDv7R9Px\ngnR9KPfjH+lRaEU3VFmH6UXL05SOnSudZyBAN1KEEH6d4soyAaQeQGIolUdN\notxw\r\n=mtL/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdSpuJlYw6KTqfwuC153KHAIpihrY4GmFiySPn/U5wkAiEA3kP4F1pNCGW5CjnoUKbLOU46BTNFnlQnSz7Pqox0lI0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.54a86b20.0_1588043866744_0.07867655857703948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/slider":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8LGv3rarZl/xb21B33Hf57QDS5ypouIphj/jcPmkECFtXAUcTL6CIxT5uUqAxIsEnLI5HqQoz8h7iTvpvNxiyQ==","shasum":"0a26c0e0d90012ad107fdf2c67464908c7b8faf7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqiloCRA9TVsSAnZWagAAIEAQAJIHNsutkyERCBceWjrE\n48Nm3yp3PYjTMumQasvhVV9A3MzwDBgMGkyp0Gqi46RE4ow9wOLhtMDDVoTE\nE+dN6BN3waVKwxu7xLrFhXdarHvOhpC7PZmxXsZPa/pfVIGPFvicls8FB+VQ\ncWRlT1TvNxSi4I8w5C6v8WRxSffjV8cA96nQqE78zGQ2c9a2HbDjaCV3a/N2\n6L659ksyZxsi3AVx26gW8hWlrQoIScM6sVC/Me8s8UBRKr3hlcasUX0j7WIm\nGmwXm+xChckCQMN0FOamlYTJq8H4MifGXeIXxqYUgNA2SJjozQnOPGwXAv/6\nefXyZJZgF/XcPwKcNf8muOnTEQsbCCQSGJJw52/r6KlFCiptZ8eKPGNCmA3T\nc+xgsd/8F8g15ji0T98elP6QNjE10/4pOp+UBVVC027GJEIWXZwsQba0df9Z\n02TQZiPNfEkjzdsS3+qqXVsgGVA5SfBH1MG4kM2VapTt3Cf1YT4MaqWCncFB\nfrTD6pIhJ66ohd++VhI2ivrfZt9BrL8xrwzto/jiz5k/zi/qhQQhp/IrWtI2\nZR01cp/GHx0Sk2Ze/RkXmlKByEChKRRNtBS52WtvNG6Rr2A9GRbZeD/7WMwx\noL3ewviNgeo9RWjiuhw4hgg5kxV/DSmoKxhfaB3BXedlzuTOvRnEdMWe46wt\nWJcJ\r\n=PhLt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2xFZHFDiVHh4cm96WqvQXZkbRxDYIyr4quDD1hpdOkQIhAKlfSIX6PAhF8V6WNdqxXdxqbFPzc/zRYJkAGXWQN+2m"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.938fd24b.0_1588210023628_0.47550810390238496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/slider":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0pRRYmsG+omnlrnwUQo70IdwjBDltLydLjK90UgVZKwuYeb9NgyGFFKyLMz7cJBUPfLwvx+TXGmBuBrHlMlBcQ==","shasum":"ed6235c5390c95e4d6c6ba19205a27cbb5d5c2ee","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQ7CRA9TVsSAnZWagAAETcP/jSRf5JICPJRgA5pG0uJ\nci2l6ZQkCZvztTMueXdDtT63h1DCRvuNXV3B+q/1k6nJT8cYV8j0OfDIuD0G\n6nCzPF6yOmY63YZPTtr9wjcXZcQf4Zwy2bs8RdZpVUkPcHw4tqU+5nA3vO8+\nn3qAFDACCM4puctYJ4s5O4FnVWjRRFCA5FEafX/D3W3vtK8WlsFlomZ7XUr9\nE2K0+AX4RntPuVqOyQEIM4T0k2vz7eH4e2OOr1+KWyaka8BG3YGg9xj5X21n\nKPHYd7kHI8+BjEPQsfjWlALMQkJsJdONV9bBhq3XRyf5Kq293/SEPb9RbjXk\n+BoIlUucKq6ObyukCbxoqqbUY3ow7W9YoArLLDaqOlMn4ZOHY03KPL4qS5B8\nMHnmI9VT0CKPtlnDsmYqfkHN03yr/trxzzpXwIW5BAPxG+5Od7DdRNsah4SP\nX6BjmMAlagM1ANCwxMaMDr7AnTRQTcdbc62kU8uuoAEeHs88gmuB5Ek4YmS7\nARAmuJ4BCll5KozWHFUwuI1/qziZOS1mg5oUkJxOSOTh0toXQatAKg/1HsvW\nVtc8OFhM4rn4OJqsuaFjjUGZtbrlj7QvevoTaFZF/WDuTNJyMCmEvdTQ1bkZ\nlscYcyD0phd+er//2ykqtVKKBu3zkGf6QRe6WgQL4eyhS8mKLT/W7dhpSqj9\nKaTd\r\n=3zfc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDinekGOT6Yro8cq/Esjj7BJMf3NXhBinITz6701XI4HAiBHNSgZDu4T/rNpR9HS9ZYGM0GtEPElheV+67e1URnL8A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.39e9a008.0_1588212795433_0.6075045260256915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/slider":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rseueFYBCNWKFPWWweg1XoiB614ePbvsIBzIDjdmqWsp9DGuk9r3hoMzh5je1q3wTSYEMwk0TPihtW+Sd3rb5A==","shasum":"4dc92abfacc6e014bd27075d53f95b63dd9993a2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovUCRA9TVsSAnZWagAAqVoP+wR1I+BumOiN8Oqp14qy\nO0mT/Wf2AV7ZAp2HyON5Jwo0+fboZmQSQ3VtBUS3CuvE/aMuazMRzHNBLDlh\nqTwQKkYlwAPYtVKdtio36sh4XRMXCeRNd+JGbyTAQPbAYJMCcnKuzljzN8W8\n1BC2xxYVAPRRwgOjGihZv/QzJMNEKkq3ALQRpKyWK70ZbgZLJEViofbYymOR\ncRnrwbE5qskaOwKWTzqxj+dm1DvyzkYLqhLcxkQqST0vqeRhkBOyBcQjW7yJ\nAYCYfzrKt8rLWIqEM8Q4cOKVloAKNOrlWGKl8PN+R9/23a5x95WoghZc9F7F\nny9lNnzmuLn/iZpZ8V4HFe9Yrf2SLH/z+doltHau5uyTh10rUaWhnqa0A4wv\nWt11dhLY7ujEesC+byBhPneAAn6pne5gjBlHWJLDnayLD31HZnteZS/W/wWb\nS+Gc+fNDVpdKk6J1G473Hr7dq4z5ZPJOrHaBacMmV31gjadyrvyKHxjyqr/5\noWICf5L11LbBjs8j3TF/kS3a05pN1oD2SbFWlPUeU6QUSsRfa6RqYRFxaHfw\nScTHjOIVj2irLqwxLyTEftGb7Wg1NNBIBzUBp4f1JyYKkiBI0bhNIpl0Dq6W\nCVqP4gCX0P8iuZPJ5CR9Z3uGvTJR/01KRG+hOFoVFzqyKy/1fjP+I6UjKRfW\njXfC\r\n=Qdob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDN+ABca1ED0C+Z5zH4jFDFIpNcK0QBFc8omXp4IYjnpAiEA1CX6M7EPBimNZYvvgYZllpBJVXQnmU+JaVT64M2LIDU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.f3b365de.0_1588235219767_0.0632927457322443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/slider":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uvDsU+Nvn8vZe4JrqRMTdrSo8aFtopUAL1EgkqckbaJ+KtaVJ5QoZ+8kZAwGomLeOVXzN/8Cp0E/nMwKij7GWQ==","shasum":"038c080bc584c328201c800e096c68d7939d73f0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nqCRA9TVsSAnZWagAArcUP/iY7YKzTBncm/VU9eHn0\ndXbPq0AkEzerth6JORJnf2A1zeGBlSUZA8zzuVO0SdCcxXs211HQa8diRIA8\ntMnRp7ms2oehSZAWMBCOXO2DfxDxvjP2VbdGgQUH140hcmxoVhKA7Q4kF4bs\n8ONyBYWT/XZJwWn+3F3WvwH3qFc+ow9Tho6kztzrQE8Hg+LY069iNPowTDLa\nz7139s7Srt8Y6VXvzlVdWOMCcTPm9790/4ACWPVY/8AySfDL7wjDhuyaWzpZ\nQ7cU/lCDhtBdSiAN2jRa+AlHBer7HSrB7wlxkQozqHI0FfC+vGiNb5DegN5L\n1vwMapdE8PNc921LB7uZu63cC8/qpWUu0VYjUg8/jJGUyFEtBX8s8DZTLd0c\nCOPo5EzcSxeupnk/rN67/22v0ZYp8nnLOmw4PfXrqlB5cnPEq/JFmoIKyhKT\nBuxvZQJuhKX/K5DnQmDOXjSsacy5hv7kiXHmwrjIbac5tfRAMD4moTbFFV7h\nzKssqKHzlU5lLL3t8dmxXXaHoRvmgGKNRz39MRDPIrFZxyMcaIL+KQBKnriF\noD1usMrXMb5/CcZzvtppRmVQ2Z+2v4xY9BxZs5hUopzBkgbBFY8hZ1+qdBS+\naDqOu7jVl8ZMOU4H0O6yvFaVYd5omCGly9X+2S8Ai8fyS+szXamqK6D0zBGe\nsE1E\r\n=nX+b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChQ1uhzCl+zbn5zt3UC0QfmYAaiF4AJZ6gmSudJqzf4QIgEI7AWCgJY7q7ESje9XmtJtGUCaeUo9vyOGP1J8mfOCQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.cdbdf807.0_1588292073463_0.5731899644236049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/slider":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xj2LIbj2pUr//dO547VQg1QhmZe0lrjwUMZm5bWUXFBQEeUmf4sEwCqsT26mYKlGT2Ua+rmV7x/m3jqHsdUhDQ==","shasum":"c41d2447b9692e6b2dace95678eda63ae83a1c7b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4iCRA9TVsSAnZWagAAF2wP/R1ELLchoxrGrvwt+LkF\n87WiI1gHmB1dVSgCOgsJRVniRqT7QvZoTgF0frAN+LIzdsn4NTc3/Du5jQDF\nm/bQ8SMZwxfqkNqKoMO70hl63Qgty5Ig2SZjkkIL+98sPuT2aMrdE65b0M2S\nXWJTpfO7pVGhYYMn+6jnaf7BVuzAUJqe+Jpqip6yWeWq1jee1lobM5uXN7ha\nUvQbMBtMO7xC0mkaEazDKdcxJIrOs1l3lhgIKn7B/OZJAi80oPHYhrhxTZ+C\n/9tuDb20TdC4x9tjqhYxVtseufqtIAHM7hiiBJzl+F2xF2i7b23Lai9jTn16\npOKHptWytU/SfVJ+/2B7zWbdWuuRkDkM3g68f9QZDNmLcx4StAC4s861ZxTJ\nCndB0N0SvGmmtq2g4aAd2CP3W7774xzTnbhXTt1SBu0Tt+l9UDIXQl9KrdQe\nMcp85EIAX5IdZhfQVlL32MQfsA/S8ziH46OWSX21k1mNkoS/4lu9mkZ14kLJ\nwzqa3Ey7o9mM6GHqsgV+ehWDAsA5Cv0XGY6sWg5lWPuP691gcwPky2Y74VNf\nMz0CZPjkxqHlqv/p5AZj8e1KM6nCqtR2rNWi/4puPDDQtKNM+6RQfYYRz0A8\nNgJfjf1/WHV3wB36A81cjwVylXhhbGUnNG23hAT/EdHHOgBMF4685C6O2M9F\nFXgN\r\n=4ewk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeUK23raAhHem+mAUVWHXlY+VltCc1LspyIUwwNVMwrAIgL5RNBKPBL+AZKUdnVdE2urIuXx/coYOmZfFvKBIWV/8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.9995ae17.0_1588358690314_0.9786272721087426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/slider":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U8+yhxM3k2d8+r5Jowfln4OZMNVJT3om0WfYeNZ44ghwRgsml/bWYhXtjFTey+T3V1EmnPB/f+D5mMv7kuP3lA==","shasum":"88667dc172262d1b59e0649dc4699b6ce4543754","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIufCRA9TVsSAnZWagAAfOQP/0RG3ZJR8SfHhoQQiL4/\nbSjRcHJfG8Dw0SZhftCmymJGzWN5FByce/jH+LCCTwd19yCHbyjtSR3I0OIV\nR50q2eQl81QKyY/3LBPO0haDGL6K8iOW3dh5CUgZ/T8EABmqGgwwHLw2sYNM\n0M1xST363F71HAvo9UaTbjEVMJC6W0kh+Rm1qk++a/3WWiBi3WyjhGqYncP5\nigi8wUcptnzKVsOJekILtjRurdV673ecZST0WYRMY0Nn1gOWJbL0b2bAUq4w\nAgMxxJPjJT94sSaH4K/gIFRI7hnfeXAx2v9+My/4AeIVFbAasX87A5xw8Quj\nyMEUfsPM6luYlyDeIImDCpHS/ZOvIJrZDkrMvRr4s+yQDW6uSu9vYl1Q8fZN\nYQxoDsyyxWsqaMADf/oeqjHri4rfK3su6YI2odFITjEU7OGMwYw+ZtQ2D/Bm\nPOyF89TdA2t7TUsgSsJvofds43q7L5/tJHHj7KLUmsjKPttD4MRJkmWgdeiL\ngyWnGpSy9iSl8zxOUXLLkEFK5syd95VSacmufvGpek3IBdyBzYAi4CPg9+Bo\n/u24GBrsbCtM2NAVF62XFORAAuxQdRH6EiPNfabrfgsnIoADR9lQsRhj5MLG\nu7OOc2vRRG3ScwXyYAE6N5cl1xKPRH+PBUiizNC5GJ2XlduLd1ZeQCN1eFLa\nakWF\r\n=K3Qb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYv3EuQlbD9NmltgWodvTDO5ixFelQ5NmTG7mT3dwbdwIhAMdeLMKwVKl86W/TBZGO0/uP2uWF85c8b0EL9kHcxDU5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.457bf035.0_1588366238731_0.5413977369639793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/slider":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VxbtY0IaGWcmy0YvjXKCpt5sETu2RYy7FMb5imdu/miEnUHnfiLEmjRNKstE0RyH3cTa3nEu+9+iGfiFn9lVkQ==","shasum":"f958ff7936226bf7e3e17f0201029a061917d03e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJO+CRA9TVsSAnZWagAA8/0P/R3SzNFzle3pozHsOnPZ\nLCg7g3SzvF86vfZixYNDa1C37buAjfT9OTu4Ba7A8kV46u7ZhTjfnx8X9Vqg\nonB/luyiNd8uyPBAU3dDinO3hQmAtpelIqmjqMDe/KrJynwUNwudyt/JvN9o\n7AMOYkFC0NBh1b8G9U92o4c4kMIfrJjOyl3IQUw+1Hs4QtjVrKTLeXkYv5YL\n/7K6kvs9m68EYQxpQOZU4FPKRBfkO5m/nTlSom/54A5zJWW4HLOQ4sTHSwS+\nZPHhsS5nRVKHuD889Uv0NI7UaS2umOADDrMbdFN5+IU15eOCi+elv4IhqJRb\nwWJTyXB7yGmusGliMAMzDdT/URpJvEvZYeUEoRFp/0b4SyWZPLK+JtXsbRIX\nJzuoyyvHBwPJnjFXS2MmN/lqthSx4Csvf8Ue3ROzCL4Dk1Bi8lDreYtuPqmU\nyvTiPd2RRcVU4rLB0KZCaZ1HAm+RUBDgncThlboOJ1CUFmcBkTYn4ev3UEPE\nMrgaeUAJPR+YQmtqloUIyqst5ajjMx9nF/E0KGnJrVafbEO4MgdY1OQPKG84\nQytqPhksp+7AZFFBUrQa9y9VQFcMUbNYn5d7OB3bCvEkw2enCZm76SXV+yyd\npDVGl2CflcK9+BbTGY+JPXN5kz9vYC/H/jkC/j0OUPJYpP2iW49gaNroJZCp\n2Cwa\r\n=pev+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUkTPZZS4lB2M+Jv4ebmrJYcoD8Md27g/q74Lq+dJc/AiEAn/tVvmz4FrfHYgMX7G6A1/I9KuEr1kMUZCezD9aKZNo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.2381fd02.0_1588368317771_0.8261306491224345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/slider":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5ajz7sdk3qSQDyS71WtTfMOA8d+ZbaP64p1PvCs8ReLYLOnsTtM5EqD6UNPpGbFHTSEICA94qLb/w/ApVS/b1g==","shasum":"c9c45f232355f02da20be0b124f32f7e9ee1e377","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJY1CRA9TVsSAnZWagAALXAP/1sxHY4Gr3q46PgN+c+X\nkyYig/ayXixebME3v5S3bJ8nYIQjSrZj6Y+ZjwwTWTt8tQ4WjxD54ogwORmq\nCoVibhI+9kLeEVSqKW3o+9pXF2g3gYdOO/3fGtwuIe53KMnKHPTEBtDZBOiT\nSBTpxU8wK3adB4kPIPV6A/z0ByfZvDCHgh1S2Ja6OUt2fQ1eznfuSJY8kDu4\nCKMKVG7IkH6OKc5xsjbMFnImSpebmck+aAmIq/rbBFpvATs6s5ubt8W1ygp8\nFXunlJUALml/sC28iGQbx8foQAr5OstZoysnUGUZjBEVCtyPbhB0UNYA1/2/\nNIDmOMqFsLB53zIUZO316w36DWcFSZvlXtjxqPPzf56PvVka04frDcfViXNY\nPfgDvvhAY9rsU0Lbr8eDByH49aquSVv4kjKtBhOl/Xxlys1G4EBfUvAMxs8s\nAjPmrOADa0RIgFPx2EnITLj8rGgQNoHQlZ9DUozQfbuF6EcmrXYtH1RXHLzs\nJvJ6nwSBHaTHcXkyU0+Xbb3wcBwEP6dMrFXLvE/j94LEMIchjuPFtdZT9bPz\n3L5O+6xBqluXOUKIfNH0/sbIWRvlXX9cvxVJcyfZv2DJ28BqlIW09/lA6EM4\nwjCKhNeXshNVSaV210/taVZ13snysezALu69IrfNRj9NMuzwXnxB/WSrZdd8\nvtq2\r\n=t9WD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEnmBaP1BOFe+9YFOW14q08V9ZLdMQ8wRXioyxlDillAiEA08iNHSb373kD5j73V0WlOENxVxe6AB2Ee6qHfefKClk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.b2ca9b57.0_1588368949168_0.06933752009388483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/slider":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-t/vIyo44W5UH1C4ci+Rsc4zB7eECRhRSfBixRL/7w4wC4qY34nFkQC3/xnnm7z8GKf+N5lwQsjj8hmpeuTZuqw==","shasum":"3898bb4f03a3bf2e6c633439bbc0b0d5ec764bd8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKO1CRA9TVsSAnZWagAA63YP/ifcRwp1cdJ/neYWi+Nn\nUVgCWm0Vktr37nWlQQHcjyxEMzKba7puHeNW/usPlYqLJ5WqZV9g3hp2V0LO\n8tlqd7lyox1VfH8bDiVvtNZ+ZdMXz6f13Ni8NwsEAV485zOVoMqXQhq3eTFl\nFtbUOB4lfaFDwI3oPB/z5Ds5LAgdiK3jq2HiMIGAM/WA3hIAlNSCndqRqknp\nCiJgUZ7liVUvm9S/B2q1eb5MFwx0zaKf2ehB+h4xuCNXzKQwwYRjaO82ZvvO\nl7T63akoZ0iuEr8IKEQco9dS7lADUJ4JLl77kJR2sAKMAOrrf8SS3ezgV21D\n6plc1Jjrut91K9Btj1fV0pooywfQwiYNjN3a+10fEpkmgdyk4sprWE9k+ilw\nKxTb4/oUdjYrOlzMUGrKW/7L9hfQfWcB6NMvRayVOKM8XyDQnR2vM3bClGvv\nryjQ98kLFmsty4vwDuzgmvYo2dnfu4vso7u+6SLnIQ251hen/rrhyV9xqWRj\nTaYoLDGRueSWIVrSX9vqSItYSSv5Y3wmllhyT+gbN5Ckr9tBSrqSGIFCDghT\n+Zh8+GPXi5zyE9P6d1LAaBaRkLjZP5FpqacL82bB6Ijs3d8G88IORaLwffr2\nX4r3JL3NlHU7FhxNtEyXoO0h1JMrzywB7kuUU2eMV3kBpNC6b7VUHCuPKvW1\nOYSn\r\n=OXRx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKnMHtST242dELB7Krv+Vt+dp/3/7LNXDLJu0BwCSjFAiBXol+vxcCbNOpQzhPbWFNrqSajH9NoBVnROrBPXJumWQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.b2b088e7.0_1588372404734_0.5856203005886822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/slider":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EF+QOH2c/D4VFiuF7ix/f++BGfJR3Ox6FzBvxkC4r3I21gqyrTDHSGPdIQK2IbshwBnnPZa4PvIVhZwiVQpgug==","shasum":"15cd76237c0552d81831a08073b6c7be6b01bd21","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvTCRA9TVsSAnZWagAAZsUQAJ0XYHfkoclfRkjsZqLx\nDWJes9r6/NX9bsGrS5lBvuw6T0zvk7vWhEgz4Ejb/5oQsLO47a+3Tx+au6HE\n4/g9HqV6edblhqs5BXXcUWtipJzciQ572+IYCyjMefLtZhoiDDcILbTQ+OjZ\nLMExFt3ucZ8AnM5faYe7sFTJrsCQGCA9tGu/SI/tny4HwmdUf9sZnHLzkCiB\nNcGeoqGALMAl6L7NniJL7+ElAyJeQIkyE9NmByES4TORsAwEfDbjqdA/aoy6\nAwiFZIQ02Bkgt/cQCh5HakXDyANqCZaM325lyc69Votljx4oxzjfarD3V+jl\n5RklhLZsBgQrKx1ly8mg11mlxDBjMcdk0tAcKWOMfPcaWaMerIcokRh4PJqx\n+XJGTChBNaSXJYAYV/GmB7AamkUeLPXHIcAj2jZ5JA0KxtTmxppq/KOFAphL\nZKrGjTKfrObP8TXqf9UrZ/0X2KBjHUzZ/NHH2CnthtCbXwbVAAYg6omsCIGp\nVc7ZI0X0tU5eKf1d/d0MYMl0pqd3fqcChsX97U0Jxd3M+/AkPHkEaKc1CaLB\nkqn9b8DTd0EcZd9lPCoUYI/i83SSDz4JyyI9jk6Z6P7ZJlOQrRI1aSUpIIsf\n2d74x0ogYVkQAIgEIMca/STmPBRDe4Sxk9mMkY75gZw2E4s41I3A0bNHadn6\nEUmd\r\n=wtG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJB18CZLOLQI2UQS/lbqykFz5AjOI1TxlAmIoXnD5cSQIhAOW6sKCvPoNPqJhxwJc+Kfs8MEmBvKPXghE7S3HhifYS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.fdd8f69e.0_1588378579396_0.4886015649058324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/slider":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XpDexSOx1wNFnLWJRRBJeRQ66nTJmwM9w25JCAUCwIP1CfV+pwNo3uDb+GOktjgMqwPYkz4ccUIPLi+BJDZnsw==","shasum":"d8436e3206c150e581135f71f949efc4901e469d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery05CRA9TVsSAnZWagAAKHUP/RxcQh8kjt7gberGMlTu\nJQswYsCbd9xKrGbmWEXtuJsrPJGHjjNXIkj3Y97cS/w9VDLmJMZ5WhQEmP4X\ny5Fiet3gzhaqgI8TaBH+vqr+FQMJYsXcre+Zvn/pChscMw/I32+uwQvv1e8X\nay1RKLb5+yXt4zCMGhN2o616lEGSLNtSZwS4IYskpKmmuEQ6+UtdPQrGJhRW\nLuWJUFlH4xahub+KwJevQbF4FnTBT153MYxFsqE24F9T+rAfH3YNWfa/Awqd\nvDUh4uU/TFtwuNiaaOQvn8Qw0blzKINoLLL8SGY0Zjxj26LqzhLaXkVyTgL4\nRbohYtphJ1Mt452dpC9j8bZq3fVHwQ9LKrOiC+eBheoXs2aksfD3HDio2Jl2\n3GCEOhzIHdsO/FRruXl7NhfBVK20k7pZZaM7mMw3vaQB0MzA0hOSsYSSjQj+\nPz7gTle4AHLAnlmPPVdLXIP25x96KpuRwTDOEYhGlqkbTX5A5WTCllsaoH75\nLucUEaM6U9GZR09xifK2Odx8HMW9twLWiZ6I+1F0UtriYZgYRzsCT8WnuhOJ\nfvhl6WGYHi0MmlfsDBnudF/blqPLlsMst6iCwYx42Nl/yr3u/YBDEFrVafZB\nUOXYeNQ3066ahk3CX12DnMBUIDidwaa7Jfyx7f9tYEShpcAC7M1sKvv3m5id\ni+4l\r\n=jd/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtMsXTNfOn4fHeL0URh+IbMf1bvdgWizS8Jugo7ocBcgIgU6yaQS5UtPWF4cP+kvQXPvWoGQMZwXza70n9QV5TBjY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.730f45a8.0_1588538680922_0.5842807250623123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/slider":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4LunsGtXTAR4uvVmsiVzLvrtLvv7DDIpK1smMY0LV88njeKxt75JE7s2Uf9gB795LYU8qzvhuP9p2jjdLz7eqQ==","shasum":"f22247d6d01fc09d5073a713164af4f8b1518bcd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXhCRA9TVsSAnZWagAArYMQAKFZVTl1BiyfwfbWZ1wd\ndr2p0EhH52aAjHePKBqp74CnRqR2vZUsUx02z/o4F8C1M7I8CmVDJuFX0KQH\npm7bezxL6ZLdA/u8cyqG1pIvCCoBE0vbMKvkqc9TYuGbp4mfzm6ISFpDdZXk\nHCWuCES+7YeQp0CC4po9/Ue2Q50bNa5exLZZ1JMyOPtIqFB46pgMQDGqBUsv\nU5R+E+gYI9u+Tgh9tF4obDKCBEjgngTi+UMf+UhL4DmQtHsqPV0hjCVwtPYE\naarD2huftsLJO6RxcbL0o3jyCZgEbuPXdj73BIP1hj9Pw9Fmz1hheEXhJ7ze\nIGVmJKEMpvsOHC3ZhziECzCyLa/8ar9eav76/wtony+bUSR2F2MED9Kr4fx5\nAzhmKv5DO80cSBwvLhWrxJhC+3GVLIpselUw0MJ7JarZbIeGePmjHkXXRYuf\nL70rGfIW9ZWa4nNWqf9zcyDZDzYD0s4uADsxQjojM8u4YltQq6Zak1Qru37w\nPngi1mKfOjuUCJeV2nlJz5+s3I+n1Ab8d1SxR+ywDHZp2o417aKfm+2TuAEk\ntcyku/lYTweMCor+4Y56xFEegjNoVyblbdfeHnVRH4NtiehJf3l8R8N5wZbr\n3EgeJOxbu0WueNJbu6vtEJY1nnay4oQ/dDIV9tl1YjVIZTlAi3CUyc3c89Uw\nb9xJ\r\n=/Sao\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHt2DrMGIrI86hb+Pm+BFm7wV8/QIdJMNfHojMOYiLvuAiASnptbdjIJlOb/QqtyyD1ZcOq7E4cZb6Bp6SGqaadS5Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.4219bd20.0_1588635105219_0.44154346048070114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/slider":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4PQZ2OtOAJ76liuuTLjkP57FPlr7kIKCSeY4dkjOidrDXwXh9YGfhVlWAzCRl3ynjQC+n2fUYflLv4PGEyfMmw==","shasum":"afda830576f318fae6a45c0e15cda97cf04a65bf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5bCRA9TVsSAnZWagAA3X0P/AySUfytKNX/Kz7nPoso\n7xi5+uPtGFqMSvDVXffDUVD9ddheaNMAUYneMcNCXw1ht5AnAXaux0RxSvYi\nx8dxdpfADEfEyo5Y8sS+PppQmwsML7kkWx0Gefr/j0d2QULxcpjU2CsAn+KG\n3e6hwLWfC2VnhCPDL5+f/ir3DQdB/rQ2vVzqtniNpU4yvbwJ/OmS/jkqfVim\nLfqhLY+OrOUfGC6EI0+px6WNa28pmY+wAgSe2EWQAmrPyoevI+H0UcUDnEMH\nL81V0ga3Ts/MnnfHAMatf6Rgyp+Z3VWTowV3iL/IEnz+pWfJ0Mm6plWqzpgu\npn+eZHIbWVt3/J18E8w/pZdoTT2oNeq+bpD1z7vX/GXVJy6Yo0Eb6EL4d77B\nJvpZ8a3fejR6qrSvwWjXw36/1JqZjtvBQbeTCFy3NQ3PNEtTX3bgnKoo4OAs\nG/upmkV233sSHBr/Pyf5fvemM/idcMhJQIugllmTUBKeyBKaN/7L9RpZsHpp\n+oG86a17lgeiJWXAX54MJ9Qh4KzPb+qrE3Ah0hrAyL2RwWY1dA9cAWsgwwFn\nJ2Rs2taOWLF0EmK6j5b9mXI8JqvzTPSDWQEbcZnN9miJWSnE3UNJfZTseiQi\nzaBLD+T8ey9upA0/7wp1bMyhR36DuWnckx3qhYcLfrcJwkhSgMHJ5tgtoZdM\ncqfd\r\n=3xge\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHs1B+57OaBHCNOR0GS+i/KBYLOPDewivT1cTHtXb9h1AiEAxRemv1StQ5hjAxDpmpqw5DE+qKgm9y0dBnDVoD2uSms="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.1d83cf6d.0_1588698714842_0.9034648499507338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-slider","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/slider":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q1hZrShKLLWPtB7Y1YwR+PSDdkShh+/VT2cX8LD+AZ8Ql+l6xVbZHcENXQnpU27rojE/smZbzV6rO2OCwpyUTg==","shasum":"383fc0fb23a652c481317c2776a642abbe30a14d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazLCRA9TVsSAnZWagAAcLkP/3S3hpaWxtCSANQuZ8Rr\nB9twtlQAnp395Gn312VYMYLc6QzMB+HfnF19kc1nExeNkhFDzV6ftVnvGSqf\nDMTPJIa6wrm4uIIGuiXXUqaSJFKlF6gvSbnoR2/0sxHRazPpPE7/yrA8AgCE\nYtZVMtJj/LlNiy+tDCi8jMmyjuaf+6nOHUXiF0ixDVTIlqBMalQZeCnNnzkr\nkfbjBHLiqEQo9d0ET0pyaRDabTZiiAWnUaEV0MTLlusDI9eo2uiC0Lh2QpEG\nnjpCQX0mMS04jMWU70v4g686kEz9mQwhip8moGSZrf+JUC6AJ0ywKiTqsAZL\nTKGwQhIaFa5G7D5mTZW2o/NBqkIG0rN6oo+ZN5HqIvzK825GcvqVCAUGyHCX\nPlo5p2w/wMtR5IH2mkCgsOI7+WarypYI8f9WOkJozEq9jA1NfZGlbuzIFd+g\nvOkvR2egFV8lzjWS7uuUBotWTn0KzSe+vq7+xj5jSmLgMgbCbgmcn6XRdK3O\n8RGCid66a2n7N8XqTx24roOC+/qMRRV4UdqcgNH78EgKOJPg2tRmQMhmnTFe\n+ItnmFTcCp1POVaeDppZyphSv86UZkuvB+8QWEA10R4PKYyj6Joa85PGaC5i\nqqXWL2+P1+++z1tu7Bn+9LspmbbaGjSPiyNqFGrCu1uCiEVQAKCD5QreVpdj\nPVgQ\r\n=VqPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICk8yM9KnFDmXLWh7b9Op97oZAId6Fmp1zMwkvPJ9O8gAiEA8+9QY6kS16ymZ6pUZGCtWSTV49zjOl48rAdnn52gc+8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0-canary.3bfc63aa.0_1588702410953_0.7000622120420512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-slider","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/slider":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-35858xrxTNSJkP8EfgGF+SJRHkYgjXlrMzwVFXYXqqIpVu50V8CJ10qI58/FRVhaB9bsK0D4lOLOlZPE5ReACA==","shasum":"b8707fa65721d48900d1a1ea2e99138b763c21ca","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.15.0.tgz","fileCount":16,"unpackedSize":84157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepUCRA9TVsSAnZWagAA+oQP/RRNbA73F8n82qPeY85N\nUGuNj7qz8ITUjnPJcrr5WfZVZagDPFSpLcLsSg+Y/V6/3w0bnI1zvZZ7NSZ1\n/yrt5XN1hkEbhHAbrmSF3tWaAODaY9MuLALaWq2UM06Yp4/ByCJe02vPU9Km\nqEBeM9rtAJj9+CpdTSKvLISY3DeXAN09oY5kmBlrMVSfsfC5PH1Wr1j8nfs1\n+5jXiUFRbm0LlFlv4B6utInIhKgp4CubznRfn8vpJSAxX1dbPrRxsudsgkXd\nMJPIQMueowttddGhyDtW+dVxZZHhMFX36vX0pJ7gT0rAN75oNU3GakGtYc94\nx7av9LNvM1YsqpkJo2uzgIniHSSWC+0A+6vqMuo8jNedcHKLxDBnxMTouiw+\ncgXMzXEWL3/ppFricBL3xJ6/VOREeDDQG4n8kLqWL+3cK54Ff8+zFDJickg8\ngFPKxegnrSmBQhGFJf4AfsoQKxj+i9z5L1O6ruQt1SIMeRkh+SMPL125/ToH\nHElcYhHQkLC+cW0HknIXhuA7RecsxEFYq9KhIlU3myPurn9yjRlzSzowZEoa\njgmR2Cr+sTGYMcY5P52AzREbjqdJUf2ikf0qI6OpilEV7I/lor9XHKtjbW/2\nuiKYMLcxykIlnG/P0usLEe5hxrBVmrgi5N3PI81Dt6LE0S9RmFcrPM0S/BA8\n2Dt2\r\n=7mzk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbBnAPzCaoFgfy2cUECQhp48Sh8EeaHPSBP3XRf0n8GQIhAN3n5vwxpANRL3URv1dF5+WrfjLmZaMGh3nmVvm53UAc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.15.0_1588718163834_0.8744481297193749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/slider":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oVEGIvke74Z3sEAWCjxhRhEPm6QvICKr8oEQTgq2YbuSjFYACQvouST6IOEOL18tNPmafT2pbO7SijtUbXRVRQ==","shasum":"9cba0f21f32514391805437e4dd0e1199115826b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRdCRA9TVsSAnZWagAAbUYQAJw6i2TfWCm+/anSSJAM\nFnM+Y5qamUKqgEGvQCUzgC4LXJc7+wm6+rt38RZ2twm/5aZhIiTD7584ePVx\nsZvB3oHYyunp8EbiNnpDtxKeLpVxZStNFMF14jeelBCM4gKnUTeqZ0lBd34/\nfmcYrkD+8AkjEPd7HTxDO+YLGmUhvy/kmTj9rYsQfr/lC3FqVBEDpaDlC33I\nZ4HRcOCsvZqRdtbLWCulxJxIBYsv0NB3e3zXCdu6S2oqxMRd4juAMg9ozbIK\nbbM9etkFJ8u+9XoXgNG1LVS8bq9hOdsh9PGxWfcThdbKfW+rSTCqOV4h4rFE\nAdg30Xa+MHvQezZjb9kVU5t1Hsq8NCdZ7NgfN6vkGaeTWhfFXRuLIm5ceur8\nMK6VVCOKXvaooCZhC+LPXAOp0iwdm/BL6vH+kKF/Ky/rzPMtM0nxBiXtsuET\nkCn05qFmdTvOQymaxfHgM07zSIUxO+83H/x2MZfkGIsG+N3YnTC+qqP73LRB\nBQmQ3vinvINMzViNdhr7OxKlaHI0wkWDmYq3RFpWVi2RS8wLhavV9+knUbVt\n5NeJOepoUbyuzvOYrPaVYVnfPTMdFk20g8ng10WTz8Sk3R6Kn0y5UziO6I4V\nvksv0lZOV+Np61dbUnY2dVz23nGi9U8VtKp6kNcfStqo3ort16AwLBTYcg6g\nJPyb\r\n=xE+g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBo8+kCSThyGkAToFdZ0TB4ycF7hc0SEhEvCfoZ9ZhEcAiEAw0tgmhU66QP42CLfCPCw+P5mO7daz7IjnZWak6o5HEU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.1f4e3d1c.0_1588802653200_0.0035259846559636543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/slider":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PfYRpIx+Dt0RmLsIiTFm5ZTemJpsojwlhscEs5ym3fenK88QcsRKR5EbP3jyoaeMfaxlJxUZZLYsFeGmSzg7xw==","shasum":"a1496a42bd04d362a4dd6851e9b9770d7530c8b3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":84192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZTCRA9TVsSAnZWagAAX70P/RBrCjrMW3a81157dJ3h\nkNP9TRX5UsaqUPicWromBbytvMGPyvS+dv0kwnEKsF5x9q0lvbWDXZAqF6KJ\n0iEkoH8BiDr3jD/yp0/qP/WxRTF2s+w08a060IGSmVlP7LeYFQYDSiUJbQQD\n369pyxK20ZJQjH+xY6LdXXHNZbAkQuwmTe4dYhpfYPFwbynlDCGXmXvrdJr+\ngyulBE0Gq0SNvzJTsWaYbRVvoCTjWfG8unrjbOkH7pG1RZxy7lJ675b1V9lI\nDiU+sH52fI6Kk6OjBrl+1C+VGP6UGFB0z0ZrE1LnFiyLpDRWXhZuF5gvXmTl\neWnXjsnTjHnRyIjptIXajeRvvL6/msST+nOuQMT5g/xu7gq7eM17GCJWmDIT\nUR2No5c67nxn0KKot5LASSLDSxWsZIrxaIL7NZ5SznNbKAGbzCHM/XjwUIzK\nBk18B7swUU7sO91w46gYDOOh84+G7Q7HB4d4/NID3iM0bblz3ahitrBJcQ9/\nQsAl2uMwJE/JS4fG5JyzUz7NTi1v7+03UZ53F0pf27oFzzcA5LhyugaQzW8H\ny/PRyYEa7NWOEyL0pgQDVcrqwjdqVbciMgxT6uP4YGLvkszSZ46PoJizOL4A\n7Nt5QHo9pbVvw5B5wDefey5N7wZAaHEE+PdxcBB47OoCgin5MRDeFZLJ9Bau\nkSjd\r\n=q95H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHkyEB1D51p7u8MCFMJ30rBth84wQ8j+19zboTWjjISgIhAIAWmlPnzv01oYZr+OVMNcZU6+t3NzfwnzJxipxY4EEo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.bc8759d5.0_1588893267555_0.507220091087971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/slider":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vHhlnc36F5Tat7l4tDDNIhWVddBIdKJgAyoKMOw/MTuzGu8FNt1K0jwF/r9/ThuWsvVMA8IU5AFF2Pen28WIUA==","shasum":"a8ee8c89ca63ad2ff91de625b2a9ead1f8fc4845","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":84288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmxCRA9TVsSAnZWagAAffEP/1TihwYih6FEzn+1viVr\n2dIhbOJU2afgK/g1R1JD70sGh7Z3Tg31WDC4zttr2rVg6DO5AcX+dJzrmH0u\ntJx2T5tgdH7CBJnROlaT/Wm3UL3/3OkJiPy91J3mDgeyeXy1Yf1WgTvQC/KX\nJ16422xiuxO3CW5DxIVHKxl5CsdGzB7WpIGq2cUinYbyrYvSceHBU8w8oKGv\nCuUsJ4lHL0e2Y6T1kXts+b61W+WUhREuFpLTkatEex17T9u7zSRWvqESpg8B\ncG48LBlOX57zh8c3R5fATxFolJvrVw4wa6+9xruAIFiNbsayRQAIntcNxEyn\np0wbnntoCnWAeeAuTMuvNrpPAtmmIIqtoXMZnlrGOwPFYAmCITbv0kWj0Dxg\neYWh1kZsGaqCbOTgEdhtn5i5oP/qtXg8P+1jMXIBNyhcGxzT7b70SV5mNU+l\nfc2qaRxZbiwYxm5aPEGR4myBSeLjhsRMedXxKcTuZoEdjMIjxlaK+6m6lHrg\nBDy1AehmqjDNCgp+thFBua5iU7o51+k5yxhz+L6jNXwv/RZbKhFCyylClSkI\nI5XdPvgAAvbEG8K+hLbc75oKobRpWonIfwPduaZzR7/X4g7tt34KJ45YPI9c\nu495G/EWluOyTecpSxx4cGjKeU7rACSxNyWJZqS5U1Z67CwSbEKpzp0FSE5n\nNJAF\r\n=8Pvo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgfqZaP4cglbaO+4mZz0+qu7gZE1rOUOQZKTuI1zFi7AIgVKjL37FbsLN/1/eYKPmu+d5dkbiCGDZZrBqQRjorIrQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.d1379acf.0_1588959664981_0.04309467209437701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/slider":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-K7WoyxuqPh7/kHm24+FTK/mO6MSLS64gW4O6F8KmicL+g0AB2m6+KKYc2xpAXBmAZ7GfbJWyU+GQfvVHRZ6U3A==","shasum":"07e295c9518a43ed4589a12191871c33e08b3e0f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":84288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbA/CRA9TVsSAnZWagAAYgoP/3flczMYpBzGbPC+D9hF\nt6fkKR/CW3mAck+GQoEE/M1fJ5yvPnBE9x3eJuguGnI/ansex+PPgZFNmVy7\nS6QZ5DG5weUl/EUSKl8GjCil6jnGw3+a6Z7i5CeHTkQCufhex/yNhQT9F39n\nqdiIC0tAsIGctXfcwfehhNeDQXDKNgibOWlH8xko8G3Z9j8AgtZS6BbZ8Rjo\nxf8tp2MomiDaHfK8DgOQpCx7Iz1U2zu5wFIciiwB9r+zU3y/vE6IoabiKZzQ\nR3p6uGGT8ITaD00e7QBXWoe0YrLPPcB4WYeZ2rJDuB4s+q8kxp0AHKGKIrhZ\npjIrlcMf5SBahwOjVx5IiqBRZ0WdCnOrYsutcUGFl1ybt/qkSTAS/whuq0iX\nNxZsRpTq+SJqEepY6f5aMStzcqUEhVrz50AJwZul787iOsvuWumM5KtKbDhX\nctqx3EcN85frId+agX7nbNauIdaLxHAkfj3EOwSRFIfklwThO51jkb9wn71c\nd8WT9/SU7eL5i7t5WiF+A+i16lNyW3cnZlfWh5I0KvmS7aoiXbQ3Rb3LenEV\n7f8HD88sO2SPURgGi/P7JMpIl1MuW3D1NLg1Nmif/TWYLTMZbwCGFRKBOzJd\ndWD85FlFnRkufxlAaCFAi11bTw48CSzWLJNhvZixA4trqpeoi5xFR7FyasUL\nosce\r\n=+ZsV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMdoh/Ly8t5Dime42NN49hQuEtMEjz1uEstzE3jEQ8NgIhAJP4otkRuzKJHp2JcuLU95Kp9hfk2OwOPv5ZThk6QItf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.58d51fc0.0_1588965438775_0.6600262957382725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/slider":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2SFPkeIkpBVvOKBLHsl9QL6tmEtACmT9xj1Z44pcP8Sdg4xhnhn8169g4c2sQp+P4gfO5ixLkjr7QNRJyFLtwQ==","shasum":"1a03aaa09f3285f219950b1d44c97b722c3a88ca","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":84288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3KCRA9TVsSAnZWagAARAAP/3ix4HcBMy+zoRwPr5Ml\nLsVQ9MgdpNggDR6gVIiBGE2goH9EEU8nWDvRnxgDlX44xWy2BuIgOCxL8pq7\nx3BRIHq9RZuPbTl6n24QEuOItSU5NI3vmuiuC5IXTbo2027Yst5GTaNb1Dof\ncTd+GzRgBUw/GePn6/CkmGvfaDElJZ8vGH69gfCNNNtq2Vb9pzpABFyK9BSY\nkEW93y6nTvCjAa9cu9Pl/1YE1Uzt6axG0lWTGcenLJZkGQ+uQsc0J6ZJM8g1\nrFmBR/Eyl1eFYukBH6Aeq3r4+x9ayaAFIJ4QMRE4qFDe4u23/dG6g4nDVZao\niI/3DOcjErpko4gEh/HoPTo6p++AwJGSU6tXAMkO6yDsmhbQm527uIr4lOQC\n9+EZmLuWrDNoS+UA0XGXGztQlwtjPYIwF8eSz7iglkhjUgBO+E86z3bER32y\nGZOg19p73Q2ovaO5prR0GO+w02ph30Ub19T7tukUFizkyGmjLvG2vQLzhLi4\nSWp2lbohH83H+Xap8lnKzdccqGZaUjGkxC/Zv90l0VB9zTenmajKMJHBisLS\nw2NKIi3/6cKn7YIdUDosOMinsib9iuNN8+6eWtVjY1jwaOacF9z0zdKDR8P4\nov07yQRANPl08z5tpvTJ7RlkFE6JWzIqeqYbZV8R4q4EOv7V6hz2c+ezEwXH\nboDG\r\n=LYZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBblA4gJ0U5894bC+r8hS+6jfrTFXdCaPtwzkFlszOpnAiEAh4RP8/XHGNYadl0IeeukSHQNpjtbKG52UTqKQOzv3Og="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.588062d7.0_1588973002453_0.08430722343981856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/slider":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LqSbZqA6k2ayogN2CmL/2JH2wEb2kbRDiMYcHlJzSOIRtg189WRKqWklTZsaPbMNS2m7EePcdlUZzCYZR1ZMRA==","shasum":"0d4e95fd26d80a24eb3e9813033388263cb541f5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuKCRA9TVsSAnZWagAAuT8P/iSBhj5W8pIDJhZ+KHaH\niDTwVzJPlIXqsjB11kCbWhGqToVRc1KJ5uSDdLjwtHyNf5k44aAtbYKh7dDB\nqIp0uQ12Pp30l2MosUuXHWCjHt1HFDKzBuVJym5iWxKHxYFxK9KezJmsqT/D\n4zm8cei4dC6cfqQ1xVaMaHhq8cuoJ+XuVTZqOorEkrOBXZ4Q764KHplirAG5\nxF0FmVg0YAPRflDDOnb4un2dclbwL2ibDZise+3+xgw4Tbl0I70pA9+Ddbxa\n/BpT/hkxuj1nuzXk/4981CrOlb1EdlCcuVli5SAhIS7Btkx5IpVXoXZTQlCo\nfziBL2b+7EDgbcDikcz2rP3gbJ+t8NnGdhPZoSCbSEilVRXmjc84CpVtFf2T\nBDkl43dqtNUbmmwEWZGzRkc6H3YZuAwPIphjhFbUKKVFitQnjSfoZlHuloVj\nSbD3/+yRp6QiCMBIeHoszY6GbFQ5UuKQfYK+ki3jSs4lSXmyYkz4OhC5z9PB\nifFSDaxew3CiKRAi8IE/dyVXusTSYmw3wOS4IEINr+4I8y2UU155HKg6nxE5\nTvg0YR8z7CUpqIHX1etuoi3rdwxIELiaV3RaXj7oH2pVDd8D8iOSoPLKXsUX\nDc5yXvzOkVDAhGm7x8Kd9bmlaFMEsusgMVyQ2kXAv3oM1+mEQdtbBNyvhQBF\n+9+x\r\n=cuH3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDymLu8R4NWX6oItBw0b9XQvaAP+beYr5cAvQlPX2wvxgIhALXwbItPvW5beeY6JSiVjnpYp/2+VAVEh2M5+E2rR+cV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.fa21f639.0_1589218186046_0.5960644638791865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/slider":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aUQ7K4zPTuGFVc7Y5u/gzU+etueCqM01WdkY3JhpEOZNTHvNOd0EUXM7RAY8TkoE/5ZT5U0gEckXMD0NljKsNw==","shasum":"081f1caf43c081ec8375f284df46b304258f4199","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsrCRA9TVsSAnZWagAATtQP/177doI2zz490/y8lENU\nz0q+3LXX5hfMj4WldTW+Yf99LJsJxNlAudaXmyb0boGL+D7FlhL9XucSu5T1\nd618bKfKmBfz5lFo6+WRlyeIjnutzPbes2ZmsjhmR//fs6U5JksctPEWoPcJ\nPqfem6uiA3kL+OagCyD4BwSZNxw70XX2RQ6AgPFA0S4j1iEyiJKvcx732wjO\nhidG4+vrHZLW+S9dHViW30a6tBklANQER2q/X81uXZdpLm2TT3/nBWODwyC3\nDVX4kdvY2cnWB93lpWWgz6jIVL/41PMvPkf99h7KT91oLvgveOjme5LAOBDk\nebbKnvtBwcOVQD3gpzEViQbYijg0UtowqhpHddYNxptrg/ExPdW4VbSZIiGl\njYD1s6xYu9BDS+/o5+j6F4t/J1Sn4XfMB1PzrQZ9YeuKXQl6/4nDk5BQZt/H\n9dxEFrJ/E1NalZn3D15++DeS9LgDuK0SuBcwWbNMW/ENG1xfCKtFcri1hR84\nPbM0lAFEtdo11V07Ekxjlx1u7zvrRB+10CGlxGv2FDO/rd8BHa5q7cG1PIzD\nEUpJyWvjzMX98ezSdn7yL3B6pNbKzDfSzDcZmWr9FnswEz5JWRIdQsUHEVcW\nJpRT1PjrxKY17olo5VWHhBP6cYy8zH/gXltLXi85qEttxjZS9uP4YrO6+O+n\nOxoN\r\n=x+r/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClMk7lpWDWqPiDHcADA/0BDOTxLopuICtWZVo7KnHmEAiAJaUeDFb83xpcJsrtThtI8fJG9j/F6n4O5E2mZuGzkig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.2772c509.0_1589222186648_0.7114932520914474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/slider":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U76fgOf4ljWYRVcY/oyF9v28DLfaPv1sxUYb9N0Yoe/L8Al3WCMFixz+IDDrU7nHJWCL1GHxhTtlso1b61aJjQ==","shasum":"a7b7027b1cf0cc1285ed29d67a7428db13fa50cc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/qCRA9TVsSAnZWagAA9f0P/1k4KoNGAy5dKg5UdjG2\ni53IXMq/z9xSnFBQzVea19sArgfuMSCughgh1jRvTQtj8jQVG2ZXyHVp5BEE\nyR/11sxls4l0lspKyTAAw4XIGtEhd2W5iRnQgJ7FN8rpjyafYKx/K0GUHDqB\nz0ITdMQdmvJTfNAKY8goB8xz1MieZ/yYysKmcvRrTfsog2zW5tI/lLpnv3Ks\nkkbrjXQaXZbhQ/smaIlILzRPwKNe1T7VGfzT0wkauSIi6npoSc/SZJv9uiVF\nXrQWCvLphVbjiAcn3iWpHVFmxGxS03GC9P/ms/X5Os8uBKbxbK3MZahCkJ0E\nnpQD2XaWQX4tU2GsmOP8E3P/BWrQubqK+XR81eNIKQ+UDrhhUw1KQ32/s0oO\nO8hxwrWdMYZQtxA59rCtcG7YEJhTos9VlxHDvQNoeUEzDO3w9sp0ftWYOS8L\n1fjuohwt1s+69a9ok8oV2luBjhs97R95MZHel11p+g6zJzIVKpc44zKgs8rH\n0xJo68SQvyLqOKJ6W/T9Wd0i0OYFHbEB+LYw14QZVbeyYyMHPdaTRYzqOUuk\nwlxdh9GBfkHbSIVz3QLLbdki1U5gbRZBd75+Z88uUeM6LZjb6Doiur56IX10\nzP7RvtQcDBWWk17vgORt42xy6pqyHs7SMH5VKNUFiRyA/3e5Ur+d9ZAaEX1V\nfe+m\r\n=x5Wl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt/R/Z6ctNaHmn6KKQ+y5cRv7mxQuxYDpHrCVUDKsexwIhAOosedDEfFjF/N25pCGFoOxetrB3ZqM1QQbAPLdLJsIT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.fc4796d5.0_1589227497879_0.9147172453883987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/slider":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gg9I7gIJ0U9lFS34rNL1fRaBJkYqkipujHEnWfiElD3nL+VvtLKj99TVPkYwZQrGT/LukKaX5I/RYHG93KlIjw==","shasum":"60f37e6ce4fa157854a31c5aef67b44a27146dda","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFnCRA9TVsSAnZWagAA0HIP/0qceORp97cOW7wtoLBa\nY4pxbQiydbRzHGVTwFWP0ba6UB+kWRGognfMOaQLAhTQK+EXRAaR2j81CA+G\nrEc3t6EdVFujvjNRzi+N0mmOmYtB0X6h5tykEtgL4DQ759jLozsuhbjb3SCV\nNq9VLOPjT+CyhrNLGc4XHaaVXo9I2+x32j9w4yH3mKjPBn/Yw1voQd4s5mes\nJ5TAPd+pE8aN8dP7KOc4epHegeGP2m1EXkqbYidVa7nGMl/KBHtUttHoa04K\n/FP0QLJW8Fk8qXXiR/WY4y60vLhos8gcZUAodfqCaMcu5FfsOeuVjcb+o4WL\n5u/NiTecAdJkzzsghQ1SmKnd8whb4gZDGuqdM8fTxK17+29dKOLsGZfA35lq\nixQYV5BQdHIPh8zvcK1KsENJDz5bDBKyBLVwyq7P6W52d3iD2jmbyhfWmTM7\nY/OIyYE8y72XIdyIvADgCJzZZEFsJh4C+G6yB5XtA3dwSfKLwJlvcj0QKR+G\n9148/mIX0M8wrmeiTVusFLZzCRbxQPiYIKR50YlE3yVdw+RgNqlnVP9GVqkW\nYkxTX052nyl8lrw4dJSDKvV8fHIrAB07CWEJW+ZsQKkfLoZMq9m+Sp9D9Hob\nY2MuppVuFoWu4d5TYsGMtwP/0aY+fxtLIZ0lUZ2I5pKVlOpys+RlXZLqNrKH\nSVSq\r\n=maVN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLN+w+DKIVldY/I6eTeuyTsZzPPiKxbUS1CprqoX5s8AiEArJKU2SBTsUi/QNAszMoLbeziZuhFxUQimnrAQI73R/k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.0d1c5f2c.0_1589231975005_0.7426585197607614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/slider":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-V1X4kPws9x/7aRhNWitiQwf2MH43yrvN/yxig+CMtHc2Qh1mHhKDqhHJudIZuyP2lQ2ciRUMvWemXEY0YGNn0g==","shasum":"0b1ad5410a75f8cdd953f3c0cd2695eed84da72d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeues7CRA9TVsSAnZWagAAQNEQAJgd63O0o/VU1/yRBYQT\nbDlv9ar0OVcGmzdZxe+nJYhZqooQaLe9KJZ3om1CEKDWSW6dkkHL5XsOxKMF\n8I5d2DqsE2SkWumXwPj9HtzIqJMFGAxqp2f4rxUUAo3NhTIpPtm6fSHVVARe\nHJrTjLtHxwt9Rkp5UOFrvqW9Fu19NxqlR1I6jvtcbDVcdz0iz37+h9u8aMGJ\nT/dkimjxZKrfWYil5KkXyhZ/CY7nWsFW2YyqjjHeCcOuRLKVAaStTGAm7hAf\nKYXQY7/jCdXJtClTpsU2lQO92tL/rKoGFi4IDnr57FkGFng+vSk5Af9u3qqv\nNlBMjUMLt70gLlznZvnF45GxxdxG+jMAQjGhoDb6yV3UoAPbBN3WbERN77Qr\nnPpN9tgkYpOUyhUwgo94J3zAEbs39ohQqBgMqjAtyW3qwOMIXikAltwS+Xu+\nIB8gGe0790s9WSEhHUv4oz4SCPiTCf0YPjcP564fwEBeqN82ejpTJ/rVsiJr\nG4YRHxhyrQ7rq0ItwbW3H9STwd3HXO0brktxxJe2Zk9uFyPt5HQ+FW/8SRlE\nDcSoc+tubVMs3PERrZyZxLa2kYN40AJdK7MjOU10CSBBNRUOQwlVWwaEmKjZ\nITThF8TmIUY4dmMugvQmAQ92hAY541V6W7+7lRX3GT24lnn9MLBiLpOLq07B\nfrJG\r\n=VYB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0Mp5YHtzW3bL0YHixjHdxx9Cmw4YMaMO9eLnQZYWn8AIgM6kynaBVMBShcnc9QIaStKOfGLSo4Ki3yDy4ctoD0L8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.d083d93a.0_1589242682948_0.9042441149755682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/slider":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6LfmLAAIEUb8xwMGSHBz5YnxI23eGV9x3S9rloofYt1ndURHvNmRv5yoHBrJuRTKVy7TGpijde6xEpHQNC6reg==","shasum":"09447975f82fe8fb0e77e0e73cf804a3e202b52e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxboCRA9TVsSAnZWagAA+x0QAI+jovbN6gpzRPJZpApy\nCxkCoWsvJdmqKi7tsJBF5pC6yLsby2t+DVTQ7nDh3NKVul93gTMC53iTpaTL\nm5CmwOuqj6B6QwueqeWdkmWUhIO8uvvSC2fEUHqiOSB/vww6vyfISP+Qvd5k\naXXlgmM0s09PqHX32vFPCNcvStakDZc1bS6By93a122C/+VdYFUl/50koRuG\nluCl/wXFD4HnbKuvT8r2HHmfbELvuSmgX6oVryKi8oHiEy0I60XORpeu+T6C\nYx0EvaEkfnA6Z2AymNiesydx20u3c7C2VGWHb6Du/n8Vnos3SKS2vHaqOSkA\nXmqM6Quq0RkA6b05DOK36vRpEAdImd0ZoeG5EcuS433z+ePGiNc1QdAr5b3r\nv3EehABzHKECnFU070i14fzFZRSfcf2asfryicxq2pFEz+8OEiWmVcH67F0l\n4Y3lIwcVgxmu+X75VomkZ386jYLuws2A6YfBUgd65Gm/JS2D3W5cgEKhZ5vm\nTXfPzmRc4N8zPebMKttICMLfadzAmIZp8fiGpbArffzSe8iV8Xyimp69WbcH\nNgA8PMW6ug/HVnWYrzy4/6/43E5dGoGljPiZ8Ns5oI6b0lrOSChA4BsH/3xU\neBz7FJEabFlFTl2Ur/yDxENbHJXOwdtxBaERC80Voz9EJtO+kO3farOFDkIh\nVwRu\r\n=6HGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyLKYZ+hoDLP6pDk/Iu+qp37wMfQrAc1z/MJP97xzgpAiAM+/ws/BQczF7fyCVqMMR2+5v8FM/kB4KqkFBqtCTO0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.c95d429c.0_1589319400417_0.8053865498831434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/slider":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-N/MoW3ImcfQJf17DoEuuTb4fc9/fxJxDHIglZJw7napIwGV20G/qhRTDAGtV0z+2zqtHK7QjnMUpBFxghILBXA==","shasum":"412439ebd5768bd99c81afda293704c127b3dd2b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0B5CRA9TVsSAnZWagAAsCEP/jn1q2j5gguuGHYmN19q\nhPyvbY5xGuHBwccALEytR/5M21YIVdeVXK6+yWQSkRsvFh/7guO926Govfb2\nrrQDQ20YmdpOStWDaocEuLlhOZTFOZyFgyoRni7Gmp1Dq91jFt8DGS+Yrt8j\n102XMK1vRKWiH//a9kxKL0fmRQly6kOY8ZIo2S2OYHD3yAq334uNZoXjx2PZ\nyc8e9Yylgf3wdwbPb9/oYuoiOROIwbI8dDU7INz/eGgB+4QnSRFVaB15PoPg\nflBh/R8QFtTnZLyjLXeaoenwuF7ykkszeYNi3hT0AmAs16KJDDrLf+flQNdg\nmMd7P5odbdr1M3ycDkv/3FnpRoZMgOKbsAM27G9WZeUdEMjltBqhJIYrQktu\nyDX6rOz3bB3+DfXAHll8C/PuHH0QirlB7D4udLQI4V6emwwhrDg9W1ajT2B0\ndaELb2dcaQ5DG0HKW+HzItqVZv9RKZZ2h1e+GbiDNxR0HTUAAPX6ebkEy76u\nadYEoQOHFGILK1wVvUuiB1VCWFm4RdmvFDBT9r/fQ5HWUmEuyByHGb+yGpq+\nEK293lGxGWFqm3z5v3EYmlgcfCkXCp7qI+J/DyX3t11SugLhubQNDDA/zAT/\nVp+MQ2L7OpGytISdR/FMhKo+IP1l1fzAiPsyoSkwq4tSReu4tHqXrYbyQLH2\nUh9G\r\n=HknY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHrLTIEITumgNYEuWh72MFdxfFawLVO4iiav3lsLdANQIhAM3QUYkMvedr8p080NNl8sxocEBQu1vJo5NGTJdT1gFR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.0c1ad726.0_1589330041361_0.5143864459550869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/slider":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-u3+JQTK8v8rwAwDLJWcNRMJcjYxFo3jgtBKxzS3j/9tKP3gpSPLMJLM40JsaTLYftdtmLXBis4yMhpe2UJx3Eg==","shasum":"1b251db44ade709b794fec0159637dd9f7ba5942","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwKCRA9TVsSAnZWagAAkrUP/jIrUQGdOKURZyCo/cYN\nuyfEJMKt9WVhsx0mB1AwMzlM82REooJCFfqh/FktB+uKqZfnqdJEtnKDcFv+\notW5xnxvu/3bwORDAdBMDDxQvGXJdCIWlb/CXxmrniY1MGlSj8UAkLMa3lgd\nLycvQy4SGO8WzEV69j2Q/QPJeHs4Qinr0OTw21NjD8aD3j8hcQFwIV2G/bd9\nMIruFb25HZEw+CUDeO+ljA/vtFkRcKLC+8i42SDDyxgyv9E/RvT14Klq3NgE\ngqBHz17Ni28cTSdYhxoImIj8zkb8Rg/WPVEd1jMw3oeGwEvFLjbsjbpxRLhd\nAvo48A8YLUUaKD70luKHgYZ/S2rGcXmY3AjbcZYepSI1syIheEMN4HIxFiDf\nTaOFBXNLiLqtb3f5f2hNVW8Glh8zIx0+SZ+3GpVrwxpNvJC9MEgH8CxXZApy\nfcUDMW4bTwNaxJpLPSJpTWJFq980Cft8vxohAojbPsykZaHKm1XWQUH4S01I\nRDRMWU/PaUPkoLd96daaX/9dx2TQd46xhBDC51OvqqzSlsDIGg1Cn5KdJx7D\nAuObY6uWJLs/lV8Dc0qvQhOB7OLWAoIuMlC9CvZdB2vTqRCc7ZDO+mY97en+\nVzsGCXOlLImntdbpynSTQwGsDCAbnC7tMZeknHoH7xXIxA1x/iuV856kUiWr\nhVE1\r\n=agKg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtAGK9WZO4khEQxKiBUc8JmN8aMxhcYDjx6ZR596zHyAIgHC+bsl4nYEIoHLe3Cn+C/srSkI6b54iNFVwaLe//iz4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.8b6a4700.0_1589390346530_0.5504910633082989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/slider":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2pay4NzB/PUkULARt5ClhIvjyYbV5x65Vw0Q213qXzEZmjcdtHdQ5HhdMyNR7gCoeSTfqBrTIw+Kz46DZWUtfA==","shasum":"8ea400e6bcb6a86d55a90ff3f36399f4d7ea383b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWKCRA9TVsSAnZWagAAivUP/A69uism0W1MGiWd3uE4\nueIcqTGI+TRu5AGS7PROOs+e/j38f6oKHh86e0xHUiZwPzE0AMcnMeZQjnXu\npvwqf8fBleXN57Z5EvvbiGSeSxqOvfltz6JFiI1NGvrDbQtxUF96C8ATA7Ii\n6OuQtmPTwNTv4MpKCSUEff04BwxT1JwsUYsJDUEhZyZcXCX+rv79rLkgDhsM\nGfTTrIRDnILXZ+rgc6gslu/NNAFayD3lnf6pAW2ixSlaYaP2Enq5H6lo/jxD\nQh3is+a0tgmC7KvIljEZx51Z2cZITPl60kU3nZvI2UqstD0pD5QW/vPCKK6x\nr5rn/yrQiuWE9NGthdYnNjFntIloWFjofOyWcz8YdEtfbV+MoaLvasZ/P7zA\nXtSHwvQPXkeCLiMsw1ZTUA1z0xsZIU7SyxX9Jmt3aWDhg8L1kGsc2MtZSbCG\nbo3yO/6b6bNEUyaLQP62mpnH4FjdiCtbOQs9snRhq7VHLtcM/MGmGrDfGevI\nilcXR38B/h5wnsm+qj13HdTohbWiOTar6esB7aht0GNS2hjJi88PXMgGRO/i\nOhdr05fAdzq7zjmPl4jw4hAXzKjiUQ3iYw3cmTU0TdOR3hyR60pFqe3DE2N5\nunKES1yf+xcu0EvV4zpAzrLoKe99XJbmz0gbf/gSnJJaE4MPByTcrKxAHEKq\n0FNI\r\n=BC+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxRujV1u8MoH/j8DsorUuFU07lKuZBQE2A9ebJopL8NAiBZVBosu/V8d8x/l3JXAG1O8oBsxk9rhNwElwedqSVEqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.3270effb.0_1589405065618_0.08672911056426491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/slider":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ptYZnQLSrk784ciNh5sr+C8Zb52UyJfIVSuyb1mpVBWIvHlCzhbYS2pdIPJGbZU5MNsKd1jlnnAhcC50PgXRTw==","shasum":"42592400ae5d1c31dda88c6db8aea50fd1d50af0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYvCRA9TVsSAnZWagAAbm8P/2k5E13FRhuNP84Y5r28\ncy6mpyyCHp+nUk5yTZZge8/gW7IrgvVV1+vaeRcsVWw7pF55Ah/y15hfYzsP\nGcxYTEk8PRpTttnCfkU7xrG0dt462ysrGfut2vwXrgAlX11mgwVQG29Z2zom\n+a3uHVJuNVVqk1YrPyj9wwSvIOSHa067uMX/VuTgRWxLnLkd2khzvdKSqnjd\nEHnRKnwwrSDLi/MLpODIMSmpJaEhUOb+EFHBn56ZmDjyOVolJdc4Z07IM+hl\nLpquh7HmRufOEglwkgnrVq1OBF4CxemA2JoIsnvhS6EkMG7hQ4n3UEPdsFCG\n6b5nAaDYHCsDWYfCfr1JOc9NIHZM3k2teoaNqSWCyMHxtswCVXELV2cBWZk5\nq1RUJuvqoLs14TdmJr+DHnhP0gMFBD+pZ3iqwkl904D0lI2qDobn6HQDtYE9\nrO+0GJasWwv+nLBIVBenFe+cZctfr1yJ61Wd5xfVmCUoT7U+VBkd7W/+cUp4\no/1k2F8YMkDUtcM4YvsVLRAgO68+P0bd8epy1kh/bmkpXLt7aF9rY6zxrUEr\nXO8UWO9KHaGHdBPNUn9JYQGYyQlamlMvCeUAoMF5KYj+U75okuGShACKlYre\n8qwbQ23NO3hKEFJAs0uSDKQ6yp8UVox4Yfdwj5qF6lMnXaL1p19VoJLOHobv\nCZtj\r\n=CHKa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ+kdWA4oJSXcJdnABIdZYOz1WeQQ3DXIpR3ZwqloQDAiEAvc55+jOeUx6ljUPlHVIOAJpU4eFnFdakITsp3iHKkLI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.832e64f7.0_1589417519387_0.5256602853668375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/slider":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vmFpm9OQslpOB4Exxb3ztefMfVDEdl79DJZGLDTyyMeyZGsUNL9QVcefHnkYGCt8K4Woe+zEEFfTN9+xPrErxQ==","shasum":"c32b667197f5bcd46936a2aec346b2657c664905","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyqCRA9TVsSAnZWagAA39QP/jf6U1N6t7YPu5Wh4qjB\nUxBo3QEa3a6zExaKd5nc0RcidA93RjjD0Juq/aoPIJvU7+1kuwxOsSSoJgWf\nEb79Q5JZ72nfh8KPvmKan7o0o5NUxAIwRutO1yu3dmjs1V9WdmqHLG+POttW\nj2USnWJrbyaRDtLS5Wl+jyGlmK8yTBumMJt6JH3LNxdf9ji5S6WwJsmBf6Lv\nDfRofvLCZ7AZiuVmmNbV61lY+VuD8EABwGhr7vWOIBFyoWHvrBxQJN9QNTkU\nQ6mkUSfnOHHYgwURcA8tBGR7pf1/2O2Qk+VfE2y/1NV98X30R/y2zRiB0E2l\nhlkn0Ase/OURypEhdKQQsJSP4LiHuVV6xGm3pW/qLTt2MKpjp8JHhShW67Wr\n0ZJWcXXuf7s4kEN/fMVwZOZ9XzYWNvj+03/YcQfItxQfcIlxngrpIM1/0rPB\nEscvzBi+NcFGGrFrp7+bbnxgMPHQ9q7FEhvLpzBWHir0Mr4zOJYJc5eSEqrS\nWnnFwoFUsTB9pb59U7wNhEh7My2VFcX3YdUl0jaXr+pddtQiowZneTF2U9bh\nBmeGfEJJVr8wu/uO8fqAPuC8Xbbn6BrFAqE4x4ocwAe5xQyppLUAI4339XAM\ntoXLNGmKlQ7fHgW12iRmBnXxJ7ng1unyfA9w2uo3fdXM14+RAxdEZonss1LA\niaem\r\n=Nwhl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVWddTJz4WEzyqDMDwXXn+HrJYLQqF13Rz6yubu5SDrQIhAJIbdtdhjkY0Ppv6clfHYuCKo38/KuXIH4Y4PDZseaqB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.472fc4fc.0_1589427370261_0.8072083221541084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/slider":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BjlLm4odFsPGgbMW0H/CWpfPTg3itHMkE7x1n8vkwooj0iJ+S5b+IQxgWrhu6WV0yvFG0x1U68pfYe5Yhc7W2g==","shasum":"d76bcf3a8d8861e34175bbecac697b840884e70e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXC6CRA9TVsSAnZWagAAs+0P/3+vyFSPvhbvJm+b08xl\nce1RdOSnUSKnaZ//RvAyLuR+g6F3AW9WAMlsmd8CVYTr56g/J9fBYoP7wIPg\nwUmy0ZtumRz004/rWgK2z4TPBh4LkPB4vIEYdy73KW3UtOvbhOBtiqZIyX4x\nDt4It5I0TYUjNep3P7zvRHAnrmDHSFnoltz9yJ4FuBOdBU5yL32BT8sUDB7Y\nI6jLOe7eFNKSCQ4m7TY/OnDnmK72zivyisj8LOvNw+XoFQn1HZgIG+vn42xA\nztBE3dVXx9LwIMlqZdagWIvjKZUOdxaHi/0wSsaD1z6qLSS97KwYEA92tbh/\niuBmRxe4trH3KmYxVHDVS8ckdynqmJnahMoCiO2knLIJpoEOET8xifYuMT37\nQ/f++ynWwgOsD/csfBBdt2Pv3S5xFFoU3SBvgxKWG2z4VCcuxH0mltO6AtXk\nLo5ciyolIxmJdFhUVitWCJGMbNlaIholCM4RzKcFYlJ9i8CpbCHZ+PnJ23WO\ngeKmCdzwoUMjB/KYm5q/77JcMJ6EAkRp2q8/q8SfT//cZfur7fjrq4kiIHS2\nrtLeoPZItQFLnOOAYCi0ujgOB7ET+bAaMQS1EoU56bwXwRdKruGlPlMNFKRM\nsliHP5vZHki25sCUvLNY9I9bV4/rFhcC6NelpDwXWUyVBPIiyVWpFqu3zrTI\n9zaD\r\n=ZWCS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzt0elsQ6mrdCgwM04RSgmI6CZ/nVqfI5nfxixvwwdyQIhAJBq5sIrNmptvXhbiCdOozAsqMRTMXrvWJxFDV3cDnU0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.4dcd7dd5.0_1589473465585_0.26717956801927945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/slider":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xiqQyhVkedPtq1KwNy0g4hH0jJ2d2kIuH+Lrza8a+FdRAfyDEiQNGkbR+UK3OccU8wN4Z83hyCbqEiB5HbBJeA==","shasum":"77e7b97a6069d2887d90609aebc19c6c892fc143","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxx/CRA9TVsSAnZWagAAolwQAJwETiT5553VVxaNvLT/\nCwc43VNQRWR1wcnAAkePyduTHyOxpIW3tJBTzxaa20ru4gnsoGaWdelMjTGE\nN4RxP2U/nJKlWIF1xb0VPHfHY02CKGAgugJ53QpioQUuD4ixwUxpfICS2aHx\nvzDZ/Hc61OcPcZiAh4KCpbB2y3sOkp3wBzxukEJGFIfr62drWCFKiQ9cA3GE\nIZlkXNU8H4ZLkaPiAfNgZRBkmO0SU3yiabCcnzU1AVNyloMCPcE9G0M33xi6\nQfZwOQFyE+d6+HwB4C7npT1jmjhRfNH/UaQupdiDNHqZf2QungEU6BLNJN9x\naoTZ/OJ/Fn7B5BPpIbcMParOlRs7PUpg/oYaKn1CFGhptSkODqsilSgHwNeK\no8culF4sd3H3KaVV1taoXiHjsWOGDHwgnmKafM31xZL41kdqRzStaCO9tDXe\nzRyeF/yz4do407wfdZABJ1WvLTzx0LyUKdj4zUkkJoN5Tl9a24itBAkU3zNX\nVxG9zBHMDTOU8yX38DJDvMMdbJf5alyvx3dhHkYaBVJ4nW/NOKRlnrOx6kwI\nmcf3F2e9EoHFh19pLAQnDOShapE8Q1jLtQUQ7N/4IrSp+J4O6fZyeEvnj3l9\nvXmXJlmFibPZEYNt6c46t/CRto0EhsUri/zuuICuGMKEXERzAS8LzGFF71LT\nmF5j\r\n=XLcH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4C7KE4COvZxdRQc9Hl5OLxSXplMreDhrEC+ng1U1o6QIgICA0w8go71irsXk0B/2ZGuAf04m3owohIhmDQkCwVsk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.bcd3400d.0_1589582974982_0.38328390707850324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/slider":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VefoV8pJXj/H9zJPqcb9oJBezt0vG6EsPSh0iNeGVQfvLUw2jEsFLECXPuAKOOxZZfr68LjYvmZ9Is6oAjpo5g==","shasum":"a4ae65eaa219fff792cefe7804e84f0bf1ca5cf4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUMCRA9TVsSAnZWagAA3woP/3pOcDvlxTRW7R6+NqdZ\nfHX6BULDYm5sKixKqxq/b5knFyUsMui0JiJ2NfURmtP/TbktJsi3ejtsAB1r\n2Q/Y5273qd43oxjgFej9LxiEI1M4dYDPFmYH5wnEgAxZzFtWX7jwX3+QLNqV\nNkIVmUiX39ReEMOt6PjvqqjSg9JowmEcStNayC6KkCEK9N+wR005z1JY6kgm\nWZkP6oUj9NJPZlgG98CRtoIKC+X6z1sCHRevYC1r/4WIS/I0teV4iomQFyIG\n64KkfRnhC5LyzoBSPgi51ussw1HpGzGdCzTdNx4aQhO1gs1Mqvtm4Fg98F8I\n11TxAtVoaMxGMxuIPQFQbH6gsMbxCNUTzDySSg/55i+Vh71+kxhQ5SQKLZV3\nG5UBk/R27J7JvDIL7ZZv3nLz9Kh2lchqHodL4usfrFFUBzXjBX/SLswu+YXn\nLlxqrT05NhjlP0JFuGX9Ca3nAsAXUQzMwS2HKiRpeUER2j4dVwwyf1zONx28\nsYceGSpj+Ys8sOmYikRQ2+k8emnCgHiL225+GtkpGKCSpxFf4XbuhS/JkXgd\n5LGaSuCO+a6OWF5eGPGI9MnghpJH9R1RIovEuxT6tJcUKyelaH+0OHteddey\nq/J/SYfFFVt4SJIbQXoLI4dtsN5UFvBahDV/rNrrVSmyQ9y4ZOWnSgFrUv2v\nFklN\r\n=YPId\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaKIGzzZWXZGqik0ICJI4y7AQsDT9ZlFR2jpKb1Ec7UAiEAtrP88WD5EO1dZM0O+mN+2r7on7HM71qDo8eVHb596P4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.91f63179.0_1589589260445_0.925223971442934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/slider":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xXrYEgC/pKMmUvUeRQ6Lg0+Ntv9GqlgnJWDEsKpTsx55gmYTxg+Jfa+swN/wP6e97RgmB/bWRQGmgUMdT7I8DQ==","shasum":"36128471d44679b5d5e53d10f88684be22db3de9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtR8CRA9TVsSAnZWagAAbaIQAJ/qKGXMZVtkktOya/1v\nLjVmf4wbAtaM90l6IlHnLFknLN4CubKn5s9ucP0UQhTbu971iD35RGuTNoXV\neBcQeSURFMSDRbTds8dc46Zz7CBmNLH47KZuDCahXOr36Pd1BR3QvXdpIi+d\nbVD3faniTHR0tppPk4d09YZxzyiTdG0un9KtDD/rIzUX7lTpzorzejQLPcax\nJJM+ZOyNn6hMVYmYf8mK5icDQIkU+pwnugLqcLEopsVbjEHp5wBr2tGD+08n\nX1g1q+Lnv+ovhxCO9IofpXPaGwM8ytQkGo5Ob5262Q1r56Bxyis/ol7hZJEE\njWk67X8TWPsEBvieMtgvImOYXW5PPVvwxH+0oMavP27uYSX1CsUHZQ7u/gWG\ns2pdNm0yjaSNbjNoDJpuvSQNG1fVAopiOjsVQ2j0fGIcMVSKqolltfFo/vjF\nG5Jg5uePoysLIQnof1SOJEEfZopKd2FYirrNPjB/UHq3yYgWrJIhntGtmTzZ\ngnOzng6VwnF1YdreY+NkN+tzsndgMGSx5yEu00DAp9TYwAUp60lq9BZ285gv\n+8eQ9QS8UGUsDsIMU5klUnukNOTFxX7AgyJcpDUDoSbNOtNY6hQlzCWFOSNp\niHvxgFk3l/sSKSJIbfvJMEtwThyAq5kx4gRQzFPg0aLTj7h2uFkXadBmLSbZ\nuteV\r\n=Eai5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOWVflqN4PzPN4GmzC+1q2+SFNS1WEzzfqXQvbDZMXWAIgf/pPjfLeXN0OydnN1BdyKra0ZVhljNlpZ5glckncsTg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.b8aafb56.0_1589826683555_0.2988149405485261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/slider":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+FaSW7eVvCc0HOn+9iwDYBZppg6rrzRhM2xTcyVPbmOOsKnFyPNmtDAdMfSOxgoyyFCBI82Gtut8WJ0Rz3s7+w==","shasum":"c0f368517bbf90a67c6ae4dde74235696d149306","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQ3CRA9TVsSAnZWagAAeP8P/RVXb8ATIwxooTl8E77E\ntd5Lu60ERgupC6OWCNGyOF6QQBInlSaSxaJK+2ApbtGQOTdCyYHLxxoV7yth\nIwc/s5N146xuD+Xmi2ip2by4DLEcD5dlWvTguEzZr6itKpCLOWg7fuiu6oce\nIScWVYsijt5eVRzlJ9q/PACaunVVE8QTVWyLNb4mSPV7Iwr+5Msw7h5XKKRW\nUTqQsdk8330i2XXGHYMSuJtf668EJEUCvltuFg7+JfmdV5XmP/ojRd84BUX4\n/aa7t6w0HGKUovCU1CZzms8LeIKh3YRXEhBp8vsCkapSDNRkE8DvuC+zkwO9\nK4Rg2Avckj+4kvitwCXe11MkOUAm0bU3wwR78oXDdKR67NeC2wdAk7DdLn3h\nsr6qKlk6jyzqIQvvQM0vV9SQC8tB6JiAVGC8cPzHAcDOaaCuaRVLOskbD8QP\nCuxB3h0oH3wdDUamj226hrbZ9ZP3evTDEorH/WiG3xEoB/4jnkRPL3OnyB1U\n2g9QyEp5eNrFFq2DdJrR9prRczE2R9LoqWAhXWmF54r+vVClHwfrnG4/+Wj9\ndpse9S+qZ8jqvwicL5YFSZwFuK/47bqWvoCFAwILyDYK0Ux0uyYHX8/nF4Gx\nVzdMYmCJiz8JnNeEKDH9bD/+81LiHF3c+C+f11TDedOigW1vGoYeVwceErbZ\n0XZM\r\n=XKyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/wxScBoJ5T1f8gauopAObTq7JAdESeEpYQSSUEjVgBAiBg3OfcXxx3OTAapBmelsGRXBLuIOolgEjTfloz24PElg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.a564b194.0_1589842998897_0.015196172302443411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/slider":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SB6cZhj1Qo1sc2K47qc+ww1WXN+0uo/+Y+/U1ZvlP88M4Lt/eiBVhCIs1Gq/SamyJrdZsUIkJM3Mb+YEt2ch5g==","shasum":"7239456ff0b7a96eeb101b5b0d30dd7adec1361e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bcCRA9TVsSAnZWagAAHXgP/0nTxAzEkWVaiRHmTTf0\nLcpgpdKrybZPobI0MKeLbeSp+n00uI0QFVkQYN42/53+8JsjY6igKwzoJD9m\nPsqMdvXQw4Pg3sHxH2lq3tDwkvhCyqzu9YXQVjUt17zeuyNm99oGv3joNTQB\n8EZrysv76abcjQP8vr1w0eOSbdcn8uwF1isNNXsTvtyiGobPpDphk52r8oGh\nHm09bSi12U8ttAR2RRjNHin+FyyGQIQjNpaambyrKxCRVBLZzm6jBJej8hC0\nUaeQDw/ojmkp5ooHJXejmyvdvhx+qHhs9VO99LnBx28pIcck980CzKbhcexz\nCzt3UZo7JthcxRnjJ63DF0nNyJm/CBrNsCLgFV7cbs9S6en9GjT4ET5DIyeO\n94a10XMMIj8nPll6NQZ/AwlTNHE9iNPAAjswsYDTxY9dKe2VDkhcHa2LUCyC\nVjXOHeFSRiRpvVxyp7IOnEPly8PYuoa5AoCveXm/4Z4qdAJRAvz/IA7CzD/s\nJIviUTq/83rYgM4zPAZfrTvavWuxnELgsHeMiF5DX1bQS1BMKmQKfRsBPJx/\nEk57cpLb+oiMM6FccHvskgHR8Ia6nF7Vm5CP9TnQqopn8faAVfNTc7N2x+kv\nZ31wZ6jCTFKGnkl+KLxSHcFXqYUJ8UGz9hlKK62S3MVh3YKBQSq43ddJc8xv\nxAv0\r\n=NxCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiFITPoK0502rtgO9mk2IZYzQzAU7AJ14rLfRFArgYDAIhANkEB3nVywjPoc2Q3LQ2J6zWbUkm/AizvgtBlIElgcCE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.ef56465b.0_1589860059700_0.24502737147388798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/slider":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/nh3MStUCeepeYlpPyG61XFcWLlAsmQAXNKNGdV7oT2YdBfqfcRe7UbhFdCukEIcvUeCErs4kgcuRzh3ftdPLw==","shasum":"c9f1d1692c927fef45e10993a7f540cb6bca87fb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBY0CRA9TVsSAnZWagAA9L4P/Axe/iHO/u8j8N68uTOf\nlf/ePIWa+4IcTXrRwvt5gHs0+gdwQyv5DAhT33rwIjTgB2CVla7d1nqNZSl+\n2h8lI8gBvoPf87AvoaKS7FBumirNM7CX94ozn+oL5hQjJDLZi9miS2OZx2pL\nj613V0pxYS7t27Bpa29y3OnozaWuZ2ZzZvQZg69T+4hKcprh04zkoTVKqhfu\nm5+Dmtw8ati3c1rJ9PXhHQB151JBI9ddSKK7cRWLRVkmz6bI3/g5vak4y0cV\n9nA5nZu5DCmdm1RD/xbhvvIpS88L03HxI6mEbQO1ysLoddVJ/btfMCN6EXop\ngqkYdrKNbGfqKekMSMDX3SCpspdijSN9i4RNCgK1ae7TJ7qgnMqdYF81fh40\nbjFLmU7CNUCIQeOsS6T9dipdtqWlu83mHHC+ipD4zAtAwmdxaIljJ5d7t/bp\nSr0NOlQEnm8Sk6vSJxUVykStxm2ZvMtCoI/35KA8ZRrEwIexEES66U0XHzXM\nIOmQrwdMfhP5eFFvWk9XiZovz6pJ+smYMcrXuHpmRtsnSSnywo7SgOBArRJM\nM2fZqrD3oQWttY+5Drj7nHSFyoKmmv82bsd1Q+mDHEysCm7Ya76qazOlJ2zw\nNO+/KXq+KhShyKq6AUkv0WH5eoe3dow/D7KeY3708WtZINQ95pmxctlMfLBe\nxIFw\r\n=EOuB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXoD4lYupBjq8AB5brxBeSB1JNvurLPwRCDVz/2D9SqAIhAKXoECfJ6kxvXr8QaPA/VxzVxFj19MzkMrWq8RUNYfwA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.c22dcd71.0_1589909042966_0.022330098706515145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/slider":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BE5ZBZKtDAyyUOW2dJ2XdqFZcangOqGOHGldEgVKu2o2RkXYg4KlcRrAffTL4Zp+CjpwZExZ1icqb4XEr5CyrA==","shasum":"18f4002ef695b3c3d6fdef8b6a31297a967ffc60","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOyCRA9TVsSAnZWagAAjeAP/30FSB8iGqVkEVF6Zulx\nzrwGWRgSTcOiB4ZI/i1wVJQ+xEbtULnqtVMa54I/NgQM7PpBwBHIjZ1Ck94A\nTtZdplnA2VdMN0+n+hW1hfe7TZu9NsMfEQ1xkb578Y5H+L3N2gG3z4/Hx+Ku\nA/sHvlEfpBzF3PEMGdmU0hlAov0DbMrnknWOpXYEbIP+TXIJIVURAcqSoI2y\nX6m/gBkTO/qdDZYfoEzFktqqEXeumLMSrT7vpIpJRmoc7yoHywdxFzjzAvm8\nb0A0I4neU2ITWM7Lo6ZLeKwU/GgSvRpTgUHrZoac/NqHvAf3uqTC0RTPNxeD\ntc+xLxS4JmMGf5hDPiSlWzXXORDIqE+aO9QLX5iZtpIhWuZmGky1CGpVTzzw\nZdypVPrGNcT+MReIP1d1xtejdXMnzlrjpq3jyA2fAh3rWk/nRZbfsWsptPYA\nLP3oW9GUWS4zry7kofBMCF3Ssjq8A6PkIzScdGGB4l1526Pzh04MnOhCp2Z4\nR4JfKrYEP/dRvDbcYWlogXej4P6Iz+5MG6Ie8kR5syZhWgTrXxskZmeD6X2B\nZsPxlS8NCgnPVQF9rbbCfuGW1lqEiJzLjTHwV8XuvDEfymS5UE113I/s3xAr\ndY2+YSnL+r4qPQ0GVChun20HH5JWhr3Jx2+NHtpBEuMYsshbnxqwPcXt7+cV\nXfig\r\n=xa89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQitkER0+J2SnlzMOosOUokS7uPHPjawgKg382sYAilgIhAMETJNUodvdYTLsCmq/59AKuAxXv+LxnWxZKUMeXe7D8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.6eb62388.0_1589920689639_0.48833247498045607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/slider":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HXiTaPj1vVpRfddpNg5nY8kvIc3V1bw3oMtunp81XGzt7D9Rt92zWUHSXL2qNojkOX9RTQ27ZxGwIAvyUjKXww==","shasum":"7a5ab204585667084d8e472856660f4b16adef52","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHECRA9TVsSAnZWagAAcTYP/0i2seu4jih/Iqs0Suse\n85Vm7u8vCcOYeWhjx/PqIKh7AaFPFfFhQLK8spr3ohP64QgB7tDhIRysLpJn\nTamTBqs4eN3sfxZxMz2DaOmt4hLMf+s8R8KXahkrAHMc1olXcfqaGLPCokD7\nab0Ar0LQ1n8WJYXY2ptRZCiZz1GlvU8ybqTpaoI/TIMlUO86zkjC0y1muPBo\nORKIfjUVZbTEGrhY65lt/2MRkkOzVrfX9eAv3Q8kMHEGx7Fbr/4C957irA//\niMHahFV1jx1G8jNX8Z1VifeCkxHGbw3RLl/qm5uf3V+4evAoATTZUx4dcBL6\nR4WshKf+EaTUGTTUZE0uHAsyjohA9x8EfNPVGyWv1BNob4YHqhCOLY2mLkEt\nhIdyI6PvUCcgsXfYC3qQSoiH2ZOwLU61wtoTLgJvQgOz0rrGSr6zPZSv4KBT\njODcvnWXuHod62pEBpbyYfn4BkEzm/6SiAPBsnf4gtKAFMM4KE4HOQHbWGH2\nR8KhnzCs6S8TvTl3T/9Qf9iDLGLop8c/6xPgq5vZBpyJAr+38SYzXxwgXbXo\n0CkumTxvfVlPT8jxvpNh9f5/vaNzU8TtrEY5N47Yn2ZpV8toNi4quHVYOEjm\nCX2PuGyZf6THbxpi9t7tPpRL4qsU0HY6wG9N/IxWvJPSRJPlfpRDUkHVZJOP\nTpBf\r\n=kbiM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwJttHKLfazJLdH+C81LZrQ/GQIoa4JOvOy29zGI+aMAiEApZfNv7nRlVHmxEWnC34hD6tVVvnfRJ+XObIkl2TTAZc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.9bc3230c.0_1589924291640_0.5286310915238084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/slider":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wSIKeguA8q6wW1lhJDxd9VWX69ThgjOKQd950Tz6Bg4YYHkFcJ1WYIuCB25SZ2yf0n/nXzhp9QPyfjZ5tsnhlQ==","shasum":"91e4091cf25a4d9a695981d47cdc8fef46603d28","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7wCRA9TVsSAnZWagAANMcP/14pIuyn0rvh5JcpgFJF\nlKrJM493jnqkPk0cBqq639JfRrsR1Pv1BRWpJGYMgQvAdNMKJXhCNNPhgr8X\ncp9YvhcUTLhugXG+ENgLNw8Wzpy6n5W9kAK5D4n1IeUGGAGeOrJlKC+svDqB\nw4tZMwkmMLSf1deXjzQrspEXMAaKE/h5Bjee/4H6se9TpD87rdZwKZGfSdNS\ndY6EnRWbIb2QcxWOplrL6A/e7SDyu+ejiVDXgVVRk1iC4whG3r6IB1CcPW6p\nAdZ9pzmjXMuTYZjRwMdRcMtOhwGb+33dcuWwkSB3yh+IGNy8NSU13zkUjdt1\nifOnUwTxIjeCPfqE0WIIBm74xg+6ZmF1Ex2dzwb9wt/Xa+ZBjfRxAHJeqg06\n7/m3rDQKjTzzcU5xMlX5Rz57P2lPvVIX77Xdw6r149jzWkFWZ1qff24PoCMU\nyImUKEOo//cMl5FOIi7Oqrk+lnpuuHO4YYg+mgw5uuj8ieXSpjV7Labl0WqI\nc4pPd9eF5WhICyjCTNpm/11R4WCJryuIo13PtEjNLDkNFaL+t0ZxK0/NtV4L\nuY8f8ibLjufvBCc0RwmiZqn488RO/QKi1kAcr0MN2f3jRJZ/WHbEz5P3jivg\njh7tXQm27tLfTwE6wPd6gBLWKzwkOElxRC2ICoIiSzYoxkypW8NGMlA7oeyN\nHkqY\r\n=WwLQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEle/Q7M5WYBg2ZHvHXURZsqyeNYVw+iMMZBMoaGIfMMAiEAv9/z5ken5CH5VYsT3BgblJs60Yx8MiOzY2VAfQQ3aPc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.421a6856.0_1589952240300_0.7232830454325521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/slider":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+0pmUjwpglVJwRSVp1zLzxLHtSDQuRwwhpyM0pmLlS3G42iowA9wcpxIYWedoM1HkS1Gm4gTWsOBK2f0YqF78Q==","shasum":"6b7fd7c7f50b2620da50ac18dbb1e6a02cceb53c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaF8CRA9TVsSAnZWagAAGBoP/Ag5EzXrUBeThoky54tH\nRaOCeBbgPPZWuHpY+M6CORFpXnOA49H3DDxIH9RK1iaHZ42voUlGQfxsRK66\ne05C34adHk5wtVzwyHuHHysKMgB4NsM44NY87JuuZU0K6JIqRoe0aF/LKfDy\n9bALSa2fTAU5G/xDzQ4QFAtUf472KnVvhhStOw7KIfm+jlL0CFiNYrhgcl1t\nnwZTYbvW5NNuwUmG/0vF3wVuDR5rocZOuixkJ0n3SYWa/ASOcfGkLJKVBD0F\nwBzc+HEpPVfGR7Skdx6kBKJH7Vk5hmNoKHM6lp43zPUklxvQI+o4xMeUVTr5\nd9lzKWf2YNWO95pCcMx1kR+7HgOAxBQjqtBczcD5pW1Ewd8eMxYQcC1ED6c0\nAFSlOzZO0oM3D/roZXgu3i/j2zoEvMw77vDGbXDhD5zhYBfxxP6tScp3JghA\nRK4462cTo/ccFgJjkrktebTU69VJ6w39Vb89PCARYdE9ohL3Mb7Dmb9FQ0OZ\nXePRLscuBqg/NfGapsm+5GVuImJc/7wQ0jIh7jVFsEInsYXvHLNYGaFzrBOT\nP1+Hn7d9Ch9Y7Nxb9Xgl56mE6J+RTeUChzJMga9bVXPGAq+sPBswkGKhV9ab\ntOen7FBbangN4BXGvHUbHsnu4jS+/sxLMAXCd2fig+4PuPj22p0otU7eXouU\nVtF1\r\n=r2aI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+4kVJ97epRMzP2BYbo+wY/cZTGBRe1a3gOO4CnIt+AAiAP9wK7HUu+cJ2w0FZioKa2XKyDgfgJOtrYwSKGlET5yw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.761aa6f2.0_1590010235379_0.5614035857340323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/slider":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wPn1VUVcGXzaKMZSOQd7NQESXeMPl2bgohDi5LhKwdLW36jlWPElw4Wi41gPCtWbMEr6tzWNXt9utiU8KRHAAA==","shasum":"1b0741fa66aec86a8b9928ffe3c46d889e8cfcc4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaO8CRA9TVsSAnZWagAAT0YQAIA1VcTkhvCn1CDhdAh1\nhBerBhegdo3RiNumYp1as0SlShekkTVfSb6DGbQoQdnfq07gbUSulitKvbE7\nZOgvKX3YduW0te1rbvCm6TAjbgx+2OQENHCjXkT57ya9GFs3+yVYsHgRzumF\nfnH5obfLks8lVpVCQgICW6vCRE9W+R/qlbqDGvzl9iskLwbLbWwirVVLxhaI\nErqF289H8JDoLvKr/PrMGMJbqX9WJCmlgGU1khHUSanm9JcMKEf4QhyVOVJL\nQ/HzAgG3CEgS94bEWALB2HrSNi0HdE8BXsskHmIWd8eLkepavWI1KogTW3Ng\nLCm2n6rUBasnYkvXrtxQ0wsmjMTQ30pXzQZXDIhBoNJGY0y90A4JTlDJ8Wmi\nNzTiV+MFYTNaEC7dDuo6a/fWNXsAnTDk1OpyDtwTMtgVYwA2HmWKIlPs99Lw\nOH68/GmrMuE//Vv/UYKD7/Otn3wcmM/FjqqTSDCFCJAG0bxVFaJixXXjpDEA\nGbNtyMumQY5fpCOQJFf6HgIQjkxLX6LD8LvvnbAf6fIJUyJpyDvef9Wq7gqQ\npQC+wQaw5kAIAw1+aYVS8tdFXkyGfxFUKJzOY8A/rimngdWj0VmQG7weJXgd\nbQNJandK4FF4os+pYQ8yHWJgWRn2vVKkDvxQxeVcpUXgSS0pX7wWJE+GcW+O\nO0V7\r\n=YA5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDnpsEcrw89JQ4si6qo/81cxLZWryzh+a05S2hDdGE4AiEAtoBqZqLuwP5r9sDJgNzNltJvsn4pWt4HoUF0HGK+1Cs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.f8654c40.0_1590010812114_0.5198004495479922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/slider":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-epswy41/Rng8mIB1a9OCj/9lpPGnVbLAuNM32O6zh2wDe1yDBOs0haMqsS8tQRyrMtERUoKUGHwRke0O0yLnyA==","shasum":"f6530794af42c18524d58253f39e0b1958efbeea","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtRCRA9TVsSAnZWagAAsqkQAIGWlTMKlueIWUkkzszI\nhFD+upAoJeX44x6Rgy1UULgGkzUtmas+9335it0yQIu6CUef9ojnAFo/O7eN\nNaejPrG64s547XVQv9Dksf9XBdyTpvXWFz5QfbBpCLTbYvRPdiMcX4sBxhO8\nbkn5F+dOJQ5VCodE2wIKOjqyw8toND6UCqd1JDOypZdRPii+jF18kUKf8sVV\nHZUPfWBQ+KNoy0Z/nasAbmBIKfk7TYEALzOE94QTKL++MTdKFRiMGwcap0ZO\nkxv+3sQUc8Y3zzs7tb6ZrgWaaibypZNeGxekra2uZOP/XBrz3367l87GFHv1\nW3Y4+ZOwzO6ke00yRfTNZG7bWGNzCQImu8hRnsbUcmpPUr/K/0g1WKjxtdSQ\ny82X1Pki1GaelsOJ7XZuaC7J9qBdqE+nJ6FF0yJ1ofqvPHYDvXmctcmHv++O\nONqa7fO3aAQoVIHTPwRkomWB7LfnbReGHJwgPLaJ55sl/iZDoLPdrqSsUT8I\nHGHB9zLY65srwHGZAmOkS0DRoA7tGo5j73MOGhdbTtdlufcElMiqKTSz505s\nqr7YThKiduf4siy7FJeGbyk2sOQRwX5YEEJtuIGoGRIaOtFooQa31TdAqjRh\nBTVIyZu6qXMbjGB5nOgT4OeRXQI7eePXU2JC8WnZmURgfR4mzHpKFhNlaRkO\npZCL\r\n=IYpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs2HIB9z8ySSd5X5tLsl9m6v0tCnYGS9T2wExMScsSbQIgKj0PEwLqIPmBPzZz5dgL3DUmgnerVyrPnGqQyS46ylg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.05f3853e.0_1590082384694_0.6812847835158651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/slider":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-V06mXIfqS3/VL0EJp69ADl777gqNU+W7gE9n1jHCq9jM5vjsH9GQkKLANfEsd4Eeqrtpa/0mp+wgAc2n7PfyYg==","shasum":"a79bbd92903779e7cebf8780ff1f5534d4077109","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwmhCRA9TVsSAnZWagAASvoQAJCncLZQ365bTz+KQCh/\nHuFouhFdsaGy8GcikNKIEPfU5P97FvJKGLbC95VfiOuGfBpdGIbU3hZFZZEC\ngqnwVZuKkv3WSmrDVMV99xIi4Op1CtsN6l2b4ockWGUCPNIuFZiLvqk1sNUn\n6GzLUyjR1ijbRSzQBBYe9bvzgvtRlsbHNOri/KPm8YtfjkjWGaOXf7DwDhCs\n7nxnFk+xA9f472of62y5tpjTiPXsmpcCr5q3f4SWoRJRjZZ7Zvs3l57niQZY\nDKHw0hdPhLnGWXbVyqsq1Mvd1+OKoLbeggV6V/NHTnshFlTtM9iaBxCaH+Vb\nZE5Hal9yTrCx1yq5JkWYqCc6vYcbW2+EG++KvfnV/+5Vn6aHS1cAEpdkqPxe\nB1R3u0Uh5uCYObBmGNVmRk9fSBN+GMs1TqbLyoroWtHFfmqJCHZ9Kp2/2Q4o\nN29UuEomffFszy15AhISJCKdIPOnPBtYfHxgd+sbqcWld10OahGPfbDhtBac\nVxRdA45cTBw39hM+4wQb55Rfe2fL+do6HyPMRKESBeeplrgI4ramJlJTxfR7\nO2kn8ep3n9WUjnzOs0tJnfdkVu8hLXogclW6ojdAf9WNSfuQ6KF9bn9/4baJ\nEB4teLTPzQl8rsXLZNBzdI68BPMkeMByt4pTgpvJS7J2uVAyu2nGhqcLkHZo\n05fA\r\n=e72l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNmcVDBLsyNr/O8zb9k+qvyIF37IG+xq21fDOEBl0kMAIhAPBkO8mEfcmnX5eB2QAnmfOI1K6ow29nUC3ee/PJvMsC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.5fe61f4e.0_1590102425861_0.5756437479567638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/slider":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-anmHsd6JxujzVRi1bSTGvUYpxDtkeGcUT3x16YVvd2S7U4oSstqW81KUUXnyrsxI0AkXy5tkZHDFnYItdt5URA==","shasum":"8ea8a308bd813d3d5cde98b4cb5d55dc43d3a5c9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUAsCRA9TVsSAnZWagAA8okP/RqanP9e1V7ow0bunG/n\ni6yGp+cjZRWYcFsmI8tCuBQBLJJyt/U8Pan2+tLd0VBrJfGOME58i3Lxs6+p\nDGipSIdXXzGvzGaEpG2wxsoDs9DKw4ZFGHivCRFur8rrqRUTaoUCIQYz/xar\na3KcEz4GUzlLeE2v24/rG/8LsQHQthOck6X1/zsdvclGOkioigotJh+dvxo1\naswzINqz17o0XPbNDfS6x0+/TJ6AfD73QTd35POtIBHxhBGBxeF6qgM6Y7+o\nOlr0fgJG179PcdU9iJoQnXibfFzjYBUHK8w+CyQOV1TPVN9drx8zCqQazpoG\nm4rV8qQd6ua3aUmzgn5KhI6WTMAKSshmbR1kDnN4ufX/Rt0mMoQHcXVnJUN0\nWJR+jGhmq7y2/A1kNqlwPlMLZt9dUhzUegz+IViZHFXFeghciX5s6ePELwgm\n/Ms9nENjJUNZ4ZqymIitysOagoaoWIl+8tvfZwc365h5wULqramFbj2A8AxT\nBDDKQlvcnYAYpm5Ibb76k8dYLSHqodzy+dBOkpd9RwglejgAZAZba1Y/i/X1\ni2/uojr3Y7t+6nHN+uV6gw7bQpq+n2yKZs1StnjSGoIEjBYCxkezbsaIKLWv\nW2n1B9yXMTGK07RbiEKzRsI06+RWzwzfDZtuDSqX6y+qvHcAcl72I3Qrbo2g\nL0MZ\r\n=5D8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdhc2uA/HeMFYyntzfweo2Qi2uslUL5KmBIdEoRNNEdQIgNRju3/5gpdhi8VVGQzldk+wXO1ZyozNRLNVIIk+XjVY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.17d33745.0_1590509612355_0.7791393846568959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/slider":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DDxEpgwl0nbMPfj1r+X9akrDsKmezvYOvf5LZl9pf8YeRcmLccA0oIES5glMGnlwPamAT98OdtyKC7OPs73BeA==","shasum":"57fea080d158e8c12c3381186e6b64fc3b004674","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMSCRA9TVsSAnZWagAAhogP/0W7Pl6iuq2IpSj4vMya\nYjjugSsHbY/3yBjVcHhe+GgIkX2Oo9ILJwbR+bM9Bb2LZiEftMoa7pIp+JrP\n3YcQdFbZiMrhmPCmAiHh7wCjEuiTFzS4e/HCSzmH0ZxLMmB0QpkNgDosAPqI\n4k1dpyLSqWc2lNQQSwALfJPSJgdbNMCoVW2SKynPe1vJpqDch9/krXB8bs2J\nvM6kDPlR0cflkQWqziQLpz10lrfxjGgn993LKkID4JteGqNNBEaf0t2l7cLp\niNILqh5hhElg1FyTTivuGQgku6axUt2OcwZSjpuf6CnZALtewIyV15wnir2p\nHszS1JG104s4T1iu8w0VEqTjauKcbvX+Dxe61TQtpe8zdQt/su9Abs8YlGqk\n37k9+xkVdpaXzqyC6yYu3DEJrPnA6uppIHXD9OMGnjf9PU5szJFav3TymqvE\nIvnC9w1GM8J2lechyE3BB95DshezHv+prW6Qixd2F+ZqR/JiqKcSF/AdOXXq\n5PsJTQWu2lbUfX+HEOrwgR/pBWiXNSe+codRGQz1ZCl/Ick2hia8bNmXzyWx\nPVj0ej2TYiOb8Rk+Jf46Z+f/hbbnzJP43ksva6vwM1nsyeY9PwOlYqbHiTYw\nvkj+w8Ot2dI/14van51r6qOJd7ltYhvt+Ks6RvaOG3b2dKqFQKbhhE5CTPjK\nQ06U\r\n=6kK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLtF66CyOAxC0WcmEN+YunoV6QhAyqL3q9RJ2xRz9jJwIhAKPqyq8T1jWq3Pge3Cl6cmAcJhzgNvDBuOwiHvJGOIr+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.e8b52f5b.0_1590518543858_0.12189311871628172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/slider":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xvh4IpH2unC3qBEtc7NiQ5uOveFzX8gX/bnEtsjk56Z9b3ZZst6Pdm/qBrSfkgKZgUuiRX9M4KtslQU79lX5+A==","shasum":"31710a8b5a76ec6484f3f4f7d3920f2e426ac4db","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2XCRA9TVsSAnZWagAAN+QQAIEdhtb4e0dH/4w1k3PW\nV/lRic2xzWv7iw2m3lZyzd8d5OAxaK7yHyIj9xU6VfEOyHbEd3nO3+bjbzw4\n/hK3vQwKUAgYhB5TtlyfTHNEbE0Fwl+Bul8T9FxySfpaXM9XJTnM+pDdQHxm\nlp/qpGAf12QLsj8Z5Q2heZ9/aiVqLHqmoblUw7uMdGEUsCLAs9Dqqv55FKae\naF+3ykJl91/cVCs6d7UFxTjjpoMsUGUbGRUieMyv8qYrAQi4feT8Ys7CUAaX\neEhUf9fldiyteh5YzcdzJP9szjCA6Le0U5C84xIaH4rgGuJLvl1IUfSLUrAT\nMqpTAK2is3qLcRwq0STGjwW4y2IK/dovKVGnYANjDfjb71mw4rDjilWpcLbd\nqipZQLBaYs2Iy8ZUJUQFm70z+B/FRUlpRohlHAxDaoefobyfcrWiZAUl888h\ny0Iljz4FONAon2jogKgsuT0VQeSzFNyM1Tp35Fke85ZM7Ii5K+5SCjl0MNim\nBRTKC+xB+4iqi2YNTFOXSEpdxiYscGeVT36wJlGh4DjgR1ctu1jaG9hV/XNI\n60iLN/3S/GDc/NUt9PhnVecrYEXtNyW4PmVI7daSnlNMmo+HUzMKOjkJDnRD\nfqBWhR+vcxBOIeacttT6kyr3eNd3EBBdfN1p6PE14ovzMCyQEv/0bG+Fif47\nRl5W\r\n=eUKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpOu9FmlQBX2qxicDSvCkQmoVzGNA9FJseGoSPRa1QaAiACxbmfs1qPRdkQ3Oo1Dx3fH/sLVfpOXwktqx8AyE1gQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.09afa0a9.0_1590529430694_0.8198038156579506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/slider":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dPcX8Sd3ldffcGfrh7cC4DB2xmsPIOp/cXu8+cKMQwJp+u5ZwFAdvSuczhh5kC7zT6H5JakFKDIVfXK+aGOfjA==","shasum":"a9c6d02411d73f12e19b022e81a5fb947cb5c448","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSMCRA9TVsSAnZWagAAv4gP/A7vwZZjcNvjdlwpayo/\nv0DCFMQkMQN+cZw3iv55YAD8UZ8828JsvZg64FTtWYy0b6eizXRJ+lgr6KT9\nFRje1jRy8zKYZKNtZkJy7ejxZzT7MaUi92r5Lcjqu6ewTHmrCQDnPrRwXJUR\nBxgUkid3gIF8tDpWqS16efs7aePy5z7Ka1tJDq3LYUfX2rRkuiWYaN0Z5VyL\n6TeJl0yRBJMHwO7Hl2ToDKhii32lsSMEQEFliCd7w1LmAPOtl9ZovNisTfZF\nWvD2OzsgXriVM43nWqkIKsrWml1+3Q9e2K7BKf/D30q3A0CrnmTI5UDntc3R\nVGYGnd/00VXRv8gBN/XE/PWd4LZWhmH/QWgf49aejiXo7+2Kh9FswKAN3RZf\nu2vUu7pQ66pwgskBbPjsJ8D669O3vIoeh4S9ayDjHrWfwLCB2bfOfkGJb+XK\nvBOuRj8FJ+vDaKkmO4k+ovxQWrv6fzr/+hF3jE91OkbxESbIlMsTrQ1IiZUI\nzwajGHF8P2Nob3oJy7v1Eog8gbxtZlkDP0b3oxQiBZf7PWbsAILNgHjGqWfX\nU3/iBvDMQSQtih3Bqw0T0INMmw9InMBEzYuZoYx7AdafUiSIpGoTeto5vpCu\nvKEL+lB30bhjXvhZwb+kMomOZX8648NEf2j2RScVys2CSEqVYUVoQpSraVDl\n5n1a\r\n=WmIM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA94o0qlOJJECeEFO727haLJxiGonDcCtTTHLw2YDIBQIhAOS/hjib1CY/qyz0PSVRVT8iojl+kj1EgoAnmd/JBudA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.58bc9166.0_1590539404026_0.6502907492207919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/slider":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Cz2VF4LpRyBu+lPT6x4PzUnp3OXzsQP+Hp+4zyro7+KNrFFsSw2HjVedRf6HbtV+sQeMx6fzpJnnx0dkrvlNBw==","shasum":"8dd681dffc792d07645d949ff15aa40d73717c3a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFuCRA9TVsSAnZWagAAUvQP/ige8bau2giS4u9FN00S\n8o5ODMfDIXhl/TGEZPEbKiAxWtUXAgHFTK23RY6xwwobeFoDXPiC6kEMHK3/\nRD2FS0QkGPPm4l4lyzr8uu5/vDdtXhAFfGoxpQzjXmgMmCDXmV5KjdIlPQsq\nwtNEASCawmdgMMZrdmG95nYzqH6Q11aIMTCqFf0RJW2JsqL8f/aJzu7znfM6\nRuLlj25WxIT+WTmNRY/b8Fpn3tc6JaUjlDEPWIveC5VxKsFKfgmywkXzho4L\n3kD1f2YsaizGDJsoI40Uo3ZA1SlrwpI3NmhovrqGO2kZaUkEaMa7EbkEWJe/\n7SbIViLQweA1D1ThVEMa/B6PWTiknm6Fn4FKd5Kgf4sVac3bUqYjj2lXzIbg\nefK9Ko4NlWdNTtR0vYjK8DePWK0dFjA0NL+g1Z/9wBNlebSgdrmYxHGnQ2/h\nks1dS6B1LPDVOC17NSSPE++BjaQxnXGwXd84ErmUuhJDGKawiC1pVp8MEGQW\nNzoAqS7mx+pILEwH/rbQICIdgn5IcNAYckGj9thw1oR0MtS3VP5m40htERYh\nnRrYd9pJ61jXQ7Fc5hGdT+WKBLGMYOIMvdMV9mp2UAsH2zDooyRnYEyZaNOf\nZ+yHoMoCYAQbbIsGDtYt2rtByto2TI5gfgHlonig/fkvo5VBnmmy9c5RL1TP\nzGG+\r\n=UAgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdCA6zgKzMfum6keD/Y/pCx4w++gVHykuYAIU2ncw3pgIhAMlh6w86XdK7TYkataJAccas6c8gOL7WhfhZQxsLvh6P"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.43bde144.0_1590604141460_0.23818933017334354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/slider":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iWw3o6hHEGqv4UJpO1EdXsGM/0UP3ihLua3fRMAMz99zQ6DEgtacrog/SHbGbZtqeO1w6C7NRxcc8GkcTHPVUw==","shasum":"cff6ff0174f9ca6473b8be2f78530d59c93ff3f8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsdxCRA9TVsSAnZWagAA4AMP/1Rpcss5tFxE1vzo/O/5\nEzJIgSc+uQUxavwy1QxLgEoIQ4FPIuJ/LhtwJCzirWrXHEUZfqexIs90XuS0\nu307bjYsdUadJddSXoHm3oJerSIcszXhAC8Hyn3zs+yrggt+GLR0jfxsO9eN\nX9RDahSqTByhaznoEPZbIiUlqZbrchFWE7iVn/pSE2kATanaP28M2EGfvr3V\n1Hbw8TFTiXfsP/FwyAbyd0IEzXreDZ4c6UR7f3tRsCMP0ddmxjbT6C+FE8G1\nIlqwMcA/c8U0/m/jfKCE/G6KsP35o41ZSRgjJdbQjy93DOR4H8sDHbQJ7xI6\nzwznxEWidAcqswJ6qyt5ZlkbGgqmn19Nnbr1ro6Xu/iS2tS13Z8hV99KFFyk\nJwMZBTRjFxmOdd6Y8RXb1vqAhTMV9aD5dnOTnuKcRSxWeMdduiDnK3pleFFu\nKpcnWB8RCCPazmM4QBrNdoffrvvWTjuPonpbtdMFjtmZhvlV+bbTeYqSWvaQ\nLRdvuc7/ipAuUY0BDERSQM7UBzsslYw11QFDhoZbOtZOW3i7VUPlwX7UWyss\nphwMVbx34ilTUbs4Dkr0n5ToNUGZx2y4ZJm6Ajq51/QgqvSHs0WTZBkWWQnQ\nxdjZEqreQKe2E6Q8Q8/4Ldcw+diTW2Jn9i/iRXfmGUBGJXDRAFinrbFqbeHQ\nqHSj\r\n=wdc+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBz4JvZZT17EPHN1NlUP1FzExRtUuA7DkyXqazs+6Qr4AiEApfwcAAoeVhXeBzCRoe3SBvlF9j8er/sYPXOltSXdDw0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.51067bbc.0_1590609777020_0.4058937590576057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/slider":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fPGM1/ZOB6Qy0N3aJv+LS5FdjiUxJsSsEsZF52Tigv11ExZgZlSnW7Sx4TxwW7YWwJml7gCmYtq+9osD14ZinA==","shasum":"9c5701145eaed19589ff4aa13170fb32e958488a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1RCRA9TVsSAnZWagAAXuMQAIEPCDoNN9b3FlZm+MeB\nblimLQV0S4xk+wYzGhEmaabwRRYWPlIK0tYJ7Kl8zFYK00VTPubjDd+jdRLR\ntSBgEYoHQV4bzwfYA6YyNGfuFwQsXx2TLMMj8JuT0MAVIIH6BQOWf9qy1rE7\nKjwUIQMDlxTqmsqLbTCaCGTsM2WisPjAmKVr2bC61G4XljSRl9Kig0Z9vCH4\nnLp64IUJ48gCGYzvixeEeowZIbwoKSBxHP0a1jwAFEhOtDmxr2ZAoCKJJ69j\nk42PC/R4QSVHOLZu3ftekGD282xhkbv2jSDuf7Pz449jMZkAphRUR3UrydJ3\nW62aDux4kWzcgYK5q4KZ4xW6ImgBq66ICE9zbnPORCM0J1vm9w9hwWwkIaaa\nkvD0NiEIMqMp4wWAsBiWQqeRVWvLdGPUsgeD0q03XrcawQEzM8fWRdpWq+EM\nWnZ49ZvilnY4ZK+zEtYRZY3JcT9MF8s2JwnDXwCS+JrZ754/Ak2bnOZRbTSt\n34yDBVGv5bIhvkoFQF6Xc4ksV0Wtw8gToFQ0C1wA5kd2sxjcr+yVGjGUcoCz\nRn41Lat3RhOeKkNPx0NMgdGDdcSIJwtlA+T2N5lcfxH1Mt/YU7iu9fQdRlmV\nBefv1UGKcihGFX3CdWg1Unrctljzu8ne8UOAMIXVkqqTQLn2n7mqhVpZbaC+\nZTkm\r\n=bHbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB53CBAMN/Xu7I8bDBt+/VvFYOh72bUil0aDGz+Kk8RKAiEA76ZhdFI09GkXZ5gBjR98803NhyXEeETIU1VD3lGAXTs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.92751ffa.0_1590615376755_0.22137506124718165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/slider":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1bXnVVC2voSqLqRBR7HXIeZRIWqEkiLCI7CPzXq51S3HxbClozWcnX1IEdGjTMVNyNDu/906eFMT27KJHI2KOA==","shasum":"f56fb6ec7286dc3cbcc45d714421eb644c2bb4b3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2iCRA9TVsSAnZWagAAg6IP/0fi8NY1JHpQ4zd7HFcQ\n4PjwMe/scR1KyllfP0cUiMw+Di+i/71MG38bA6cMOncvG/Ei0Hzq3L0+zby0\nyVVEQFjZN1mTuVpb7u5gStHI2yuU5/p7eywPiR2rE/V6im5GwwMP4xiPddmJ\nd5u1eUiDLgOz0znpC8yQm1aGZ9nthMXPLctaIAN/wErY4T1YgJQz/icM8VOY\nPmOEk7o4wSp7aBByOsYVq/5yg40s5GiQg50ygbleYxPPRTjVZWfYvx3cKrjR\nQHVkvYjGIjwv/gBuRGnjWI5iIojJYLuJqlHtmV9Eq6XCdbE2Vd+CoaMkfIIz\n54pKTaj3DOhMNjiKY60lf2fzyAXPMbU2b9tuWC5Pcvq9KzLFP9UZ+UnzLT00\nz1H8OsXCPVAQWxaHxxzAT2Vt5mQnHawgfthnlwvT2q7F+ukR1VMNPbxZeGna\nf/YtZNiVKAAculJlX78leVr7vOKCYFnPLSaDoxzhpepxENpG3MomISnnLvH2\n4U2Y5cuRUENWhYHQFpA5UTP8A0gDzV0JgImbIwoEM3k1gGvR2TX4NnK831Vp\nIGSme7BS5xg0mDb4cNqG2T8OckIsggw2QzLvAENtUWUog8LtsvSFBLyQwzZ4\nnZXwsHBVcvUQePLolGruJAD4XDnkhqgaxx1b8g2rcvIpL7xtUywQUfe0WUmt\nUKxr\r\n=f1ug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsNkX9YuSnZudL/s9vNz6H9jXRW6b6zcQchYwRI8cypAiBhNzUgyJ20iv0Fui0KT/UfcsG8jUOCE4hVgIGMqCWyXw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.aa2b40bb.0_1590693281877_0.7711245132192239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/slider":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zEOyc/d5Z/j2Ri/xefGPpJeENyerOWpBPxB8Ic4SPVVHDoPkuRkNPsxVosxmKIapRqBAN5GYM8pJ8ztsMho/rQ==","shasum":"69858e653d311f42ad2de5c274cca88c2acebb33","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqdCRA9TVsSAnZWagAA1EkP/jRqfQEfkcett4Ci4VET\nb7ZhNRXvPFwUYVH3Tkczs1BOa5ZzebNE9kx4TysqLbNvIyhtBdeRCOkRerch\nzEPubUaGEH50cJd1D/Jf3JwdsbVTDht9JNxl7qoFEno+kdjnrx9nKUUlB3TB\nN4jhOKG8jgbj92H1tJhN24Sh2RcQDRd9SyxxQAoFWJG+vMn3jOflgYQarxTX\n9rdCztvN6b7jausX6xvjwGN/HYFmUHaQ0Vh82y7Z7s2tiX18/SZVJAwqtLGT\nSTGpYHsVJXkGrdipU3mXxIt/KStyHhW2murvgSTOh05/IdT+722f6+CShDYg\neTnw+ua1qR39v1HmzfGBUELz0olgwH/fqjjbphQuUmmI3JGQ2QT3sCyU0mzW\nf/nW4BDuqWs5U2SQ3/6FqJqx5h+MYoYXZv322k/Q1kT7vgWFBqgzLaeGwvSz\n+Gv31MDEJ5TU9RMZisWx2wqqvJjcE02sTrxVe+RqznQPDRDRgR0xQZMFzr0p\nQmF6n/KA0GWL8JXyzZHclT7gdvAspRWAFpzz2WA1rhSZlyxca3EuyYnejZDf\n1se3WFnPesUqSdK52Iui1Gf1yzhDJdggHC18s+9ezrPv6gTm7m34QtT0CHQN\ngm+AoxMmR6JSHoA+9kuYVxEqd7aW2au83ADHW9qD0KUrbHQMz1rlveUFHCad\nHCKe\r\n=s7e0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7sQEoPZQkOSMnASQ3en2UpOTI5fXtDQ/J2ERavi9ZcQIhAN9cQV1TLkcNEIzvhWbuNKxHyjwQhqxrtWX4MwI/O/Fi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.1a870a01.0_1590700701527_0.01188587403369512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/slider":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KONKFmKXEzc1dPGjfRSr2gpQgKPyIJxtNaiWm/HZM/NwwKd1oMztixssR0U34+NFuSev+IsOZeoyoR+g2jXoeA==","shasum":"48054274837505dea51767c7d9e59d0571c534b0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":84444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9pCRA9TVsSAnZWagAA39gP/A2R1oeRR2nXqT5lVdoH\nGxN49XjKIzHa9J+eTZ3d2GQroOztVEYyIgM/28kTEfC8YdSrEq6Lj8uIOkz7\naxVs4afpKAfTq0idp5a1ZI1EQG0g4+iC/YZ7c7XNIOLG1c2oA6w9zXaR0QVc\nTkKBQXBBmrR0tolGhfb7m6cRwCL/5i6FtkH7kcuYW/GQEIMbs/3xklvz97m1\nfKup3GStwKQzxVFud2DLIR4d2EgedSsMDn7d6Rw71KnL0XFftZqqbJj40J9X\nYNpaKeHLK1v2Nx9ePln1xlAmCiu1gc1z2RFwTT6PgBKJCI3MMJqTambwZBKr\ncX8j5keM3FMYkfj6cpyZZkd8SzzIZRjo/mgxpAbJ+/oGQJffJpSOOLxPaKjG\nvjhUoT8irgNhqH3EX38DAwlyB6/7NaqG1D8ng+7ik+xnL6l642x/2fnoScIq\nX7jZ+YXvunZFkANKF3qaDRzgYxXY36OGMMvU++FsOSwx4SWavHnv34Wz1ArS\n8U84v2qSQo+xEn6JWUdH5qPcRfJs446zaVPL8iWZiqDlFK1sRfeDmTVxuxbr\nH3WWE1YBVbyccAGxxL+mI5Ok6niUce6p7QTmlB4BIrjouwMjExFE1n8H3AgL\ni4mNLe0pfxcRqV/mZ9KcccZYxhTwdis2xs0kGYqYfsxjCnXoo3frXusAy5ax\nbYB5\r\n=dd2p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnSJ4xnfSjLdu2nK4p/uVnoRKrChNEFBGZBNw+/uVBZgIhAMl+OYsO++oR/JsMBo1QgzsAvM5f3L2vjAeNfP+uTNjB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.ad57d086.0_1590796137561_0.06894698917711661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/slider":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-btnuCiLpZBf3FcKA5BHPzoy/m6dBeEcBKSPx3TlvZ0AEZbLC7wdWD76+fBSD3b0slKA4bZqyD66xVSUXnIEIwg==","shasum":"dfb6d92cd2a276c9cd228708cde4ed6bf8f81baa","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":84450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqHCRA9TVsSAnZWagAAjVMP/1cqNBo9yQX9ZGVtDTw1\nphKidaF5N1G6GWZWGUo5PkoySIxBVq6qpAk8jx5Oci1SOA89hIjC6I52PQac\nh4xYwufZTE8fWefC5oAvCgUGBwlMVyDZUUX3gBAM4uXsNZtQMRuZv3GI86sr\nLyXpXHE7puFE+rvKVbNx1HhRzW+AIgNs0tbVlPzb1jImuHM5QS342eifCygM\n9gWpEpzvnYCyf+5EWyrHuBxvh3ioR2N++akH4DTmapLfNYYfmOu60CZLqO6J\npQe8tL1wELVvke0z2w5xHS88zAbiFWkT4PCM4kZbGnMCugjF15G/crochk28\nDAAS5xk8rb+D9Kwdfi5l+6WmLxlNi1b6lR0xYWv5XXrjG5CXfACQ863YOuyh\nhBKnE5Xw5Him+ez2IQftJnCnzYbV5AqVpFqI9EQ1Cv6BlLc4Ior4r69xfjNL\nRKbumWjjzZ1sf+Sb+A/MAxsSu4WsU1hx9QyNpMNYb7X2TltUhcDsAcPJiGUY\nO+IJwux77aqvF62MSjhLy2hqfdgZUPj3/pwu6s7EKPpdTRYg6ohn5dLbgu9v\nZmv6QBXEhTkBQHiwB50Uv4sHJQ4c0fKqokn4535o/ocpcwtIHBDW54EjRe4o\n11dOQl5ncDcePeecFRjp2/Dcp/HNflofcC9ukF0Sx4Vi+nRMKojLS0gEjo0M\nuzBs\r\n=7fuA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0/pUdISCem6JDxLMD6MwTg5M97koM/D23kiAC+JcHDgIgLPUViiqJhBgqv8X/IxnuXkvwg6wWCsLV+FKye1gAPjA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.3bf2b4d5.0_1590798982879_0.47751589869766065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/slider":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J7YX/wxNkl+aNijfWCtFx/7ryGwJno9+fiSxO4RJXONsB1nzurfL+17PVNLAlrQzywe2or4+Kmc0Yv6c4oSgFw==","shasum":"1afc8a4069f0480763fc3fb45814499d434f6ee6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":84450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cm/CRA9TVsSAnZWagAAUFYP/3a4rYD2UXBCtGADfg0M\nDTDYQSjz3YzHon+altCeQL4iU1f+18SGrYXsOXjygQ6YoljVUu6yqh0qtXRN\nq3idMb20V07mRGCu2wegeK1IUPvVLI2NDzGEIcHWkWuAxpeJTOo9q7mFqKuj\nU19OWl/Bx40ojKclGv1zNagPqvbdMfe1FpayzPVNM5JlXYOMXo56m2xzSrlm\nB3GW3NZcrOlknH9cUP+p66YS2LDRHebA+zpt7qYG+/tE4XFaDXJaNk+HYY63\n0RCLfqKov4nZX8C0JAE/FSph52YiDS3Fa2L9Ry2BXa8qZ1rcpuQCPhwuPJSK\n4rdv8kwmji53tsuYNy8sYYK85xKjiWBdvRjVRAnoz/7TVgt0vGyw/3HHtr0b\nDiAHeGH0XcssDRCdAMYIm70qo76Ge8x+xmjqWdxrK/bEGHM9k2SQo7wIpMzi\nJZ+W4dwoVtRYjbnTs8kj/9PzlfqGQKoUYDiUyFuBPpdeIjBxZcQYVHvyULoq\nn9rYFmVy0+myb58CJGO0tn7Zp0Rbw80qRqN71wCPdpjgbMkueZZBe4a+TWPB\nDNnDpNH6JI5suq2jqoqDpuSfasxkMs+Dk16bXyXOjq3MwmJvgDA+Y/FyARyg\nQj9t+6a1DJP6wn4XMqrgKnduhIycOkmI1cj1EuKH7mr850NFbNekb6MBpBqy\nekZg\r\n=md9h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwdXggl5wMVipUxuKIXuAl4RDuWdb39ry24IB5HXg9eAiAF0t0D/LFi8jrYBsaXGIDIjp0SI5tijWAkH1qi1o7z8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.ac05f090.0_1590806975313_0.42321441345424593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/slider":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+jDgNDSUD+wv8FDuWxoF18OQ7ex1omZ9qrimsm6byHllTCdmfsQpkB6jcn8HWbpHpa88pTJ+Y7gO26el8ixdTQ==","shasum":"d40bf7e7772157dc61b60e44bd6dda17f1f8469d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":84450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctRCRA9TVsSAnZWagAAblQP/imYiC8Gh/HoDoWEO2Dl\nDic3Rspdc7oz4FnTa50sye1oVws08qr0Xr2MWDx+zYVTnwbhkhGWYjFp9+lT\n3xk7Fl8t3StqiEjpM8yfhbtvAMFJf4xrc5pr0mSv2FOroEU52v914w/E6HRN\nqHSkgQTqemC2cXlt7yeTenfrjntaoz/dMrBiK1lfiGsqTXHRaG3ac7X5tfUh\n7zXJH7c/YU5fyvwv0LihhJZd3HmVY3e10dKwJGSqZA2/suGBlvMIhQPHsRTT\nyyZa0CVXcZOhMYT7+7m/Th3YUYCIl7N3e0S5SPDrurFWTzuAAD+K2bQMvyR4\n4kxPzGKBaq4bj2N40WQOi4wqKxVOZ5cbxmzWKbzf1072hq0tax9tQdQp/7XL\nA8kk3+umrIUfZqwxYD87IXUvJx9lbvkxMjzl9JNpgIoex23CjFkG13rfT0X3\nFfGUjeImxaNrSQqTw7jfc5yPlVskNEbrhtV/139uDVQFyryHhNZTlU5KfIDl\n/ijT135waAQy6gMp0lkWEYTHaX9KO6T8Xvj6YMENUl+tg6jl6v64qFOeppUZ\n5ufRsebvqt0VNEv3MJTrzv85DvX7VTB59znq4EVYwV6MqNalNOBGnxxUFx9X\nzuup+lIOcLtA9SET340EGLXWf6w4+JuKez0AOmcEWbpjlqWBZSrTec0TIxCr\nIKoT\r\n=hFMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzBw+8cSl3VQNHX5XbodrWbDEKafRiISXTxRliUUVGzwIgLX3Qa12QX61jqznVGnaHUGEpobiBjww3ffrbJ8OU2lg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.0ba7b095.0_1590807377227_0.7264506584422368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YNdEz4oLJ7lbl3UNmkbuIUfTn94k/Rp2qGqRXUwg79i+hp3zD5r/Ae9KttuehX8JLW5JX4k6OBwY2PUyWD8/7A==","shasum":"ddca158948d0e062e44287937d88476057544e1b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":84450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8gCRA9TVsSAnZWagAA+GwP/jDIMLz1nl9EMpLDgYy7\nGFmqx/ZzlbNt0ad9e3/b97oBmjwiNrK0X1q/kjO26gZP1C02R5Wnh/X0LuZs\nMZOvCTP9lJht6U9ezzK3o2uY9hhc51+eIGORryvlWoloq3WZrE4yHmj0jAET\nOj04EeEOaQciWoNM0JN/I0AM+PYkiFrOMN7zm/lHSI8fEf52jL4Azc9WepS2\nHHcQ9+0TzzP2afRbiXFKNXjXqvKv3Wrsjdrwig3Yu9HGWCkxvyZyxROL1bwl\nixnjVYp8Sdih7DCAEljYb3jy3A7V/CNMPZ6SMC7BFDJm17Cz1LRKP/ahusly\ngCjkNmdW9EA4i4D5qNi++XUn3B6q+9YPYUonGqu4d6mWEV/fX14UpmIDyq2/\nrTBhRaon+hi1LxO+8RHJXl6RCSb4EecU6maWGAisE975oot3yQuDAXm3zj/s\nIsWqtr9K6PC1PMsXO5niBKfJ4CzFWbZb5jVqEnSxlvmjQnsWLKRqEp6NPxIi\nqXbbesdarFXm5ih2RyiFw7SEp/IerRNvZyIne11ExFtut/gn0gtwMCdqOTRY\nTu/WXTjjDaYUHgnUL0TufGWgP+THrxVRqElQxq441DLbcK6UzmPFrwZI9ytX\nDvzXXD/dl37Dnmi/GK5dz39b+P2JXnvSIF2azw2eGrWbIB/q2nXKmBQzwAh1\n/3Vg\r\n=0jRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIc0fGtk+U2iDD9g7kTeC2BZ8bMrHJlw8MWH/enuglGgIgUJqPO4IcOmYS5igCf6JaoLwWR3gEQ2BSYXaKBUcPoc4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.5eaa9bac.0_1591054112443_0.4155807487342773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.5677ac20.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-u7elotDC8TrI0vzTsHQpp+jAJsRF7f7oa5MoVESv0Mtg3t95GYRe2mBEZp4Q8z2WoVKKDUqhgEIBR5mcnPvGFw==","shasum":"4f376b5ba6fbc463ecc781c8543a2fad289b9301","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXGCRA9TVsSAnZWagAAq9YP/RlR6PCE8XIC2bBxzqGJ\nKq6r0yoP5d7YTGQRxOsiBn2YE6V5KdN7kZGIhGuQV96PzNmpMScEijmg/scR\nqtU8aUqpQPO9VUpQnZKZ56TpsQ5pUIAiK3WBzb8jjonlfzaRX8LDIwyr3LOg\nYKRlWxemN3UhsC1EOhk7aPhDn5IumWpjLpIVv1icrwiNalfW/pSVZCY9cbnm\nOBgOufV8dIxA+JmI+NBlv+WZCAz40NCxxYsqGuP3VrcvMFg6lzGOKh5D0cJM\n+CW/QFWDdRvQaRhav5feNA4oViwd12XoTMke4V1+gkeT9/ab9QDy8Ujv59g5\nOWzJ12zmQir62mr4M6TPeyLEGDztPYew+O2G0s+llgS1YzCChoLFx3e/zbJB\nnoi4BP2bc+oQKfIoo+205sDWf24t43aKZyTWpRxN6fYAAG4a4Fodtx0M/2iI\nhAHmQ/G7UFU+fT6K4F8HOsHUGhJsGvRYAtwmsYcfTtxgI+lrLEoFdUvtMVl4\n6m3Yk+h3lp3q7gAhkO+q7OWv9oitGTKyEOr5hRb+JaUKlJg45FjVVFJKs0Bs\nKF6m3uHTP88VY3kMR/Z4WaTnix2zC4W0ozn97jdsIRJ6rV8fM8qYkCFhUwXc\ncnIjDk/7BWrRPLvJ3fLI75VID5fvHu1jGC8yxF6PECJgQOHA35f+Sjg34p/N\nj1Jg\r\n=cRD2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5P7Ua7qOTLLBJRep/+ZNGJGtCz/tphOwQOHYHdxuSpgIhAIkV2fUM94A80LQ8PQP6MqRb86hxLNW2IuJTMFgoejEm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.5677ac20.0_1591055814483_0.1633865083245658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dszfvvxA3bzju+lf9d3UpUiCMv1+tuiF+SaD/K338oNjZA1Xg7tuAuS7g8Y8QOZ7Jb+VxU+6BDvpcC6PPFJeBw==","shasum":"25fa767eae390bf0a47e0e581a1baf8ef8414e9a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZobCRA9TVsSAnZWagAAQJoQAJmB9bTQYFUq5Vq7NK4h\nv9HXIMyqKCxq03IlgwfNshhw8FXtYCrV205qK3zluKOMJ3WK/363QoU5tkOy\nw4EU//AyYf9O+dXLmaYO0HJSCLOb/2xa2dpwG6eh0chF8aTo9Zxoz80IzwkZ\nb5Aw5QkVN8gbXSGDfrvfBwuLcVC9kex96xwygsYdkgJZDCu2rYnl+g6LXeuY\nXyDTidsVdKb7Pfc/FIdU+kyWVmvaZrO8Ai1EJim91qBDvYzjuUMXyS5iHO8e\nBzn/gGcIAxYMnv+VLWFuokm+lAw+Nl6N9F2Z50Jf7yl9Mn4X4jQnQY5ZCz1B\n9NWk7zOHct4uy+bUpcgc3IuBh9xLbil5gYA6Inl2Yvy/NB6YSfpi7MFTFAlD\nJ3UP4tWb/wurMwHh6BHibWyBoaJr0BMiFYbwcMg4tUeq6QQJlwsYr/jK0T4d\nY4zOvd1x6JIQlCWboZ0PtqEEmoNwGA6dqdYa6hf13aNbLpIq86gEm0uwocL/\nCYESBQyszhT6jAh6W3uZX/z4SLRd6Xwv9qR+9x3qEIlWQnsT24PT3On2A46q\neZTC4SA2dcn76DgF3hvpaakNXqtGzW+EiL2XFCaDOhxq2RMzEF4rlCnpb+D2\nahFJy6wcP4kOjGGBmvyGQs8WGgVhhOWMAw4JUO3VI+3qOk1v3mIk+Rmvyjny\nnHR5\r\n=tiBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDg2tr7yiBbJp/3UUz5M9vulAYC8rJBjXtVgnVcHQyfEAiEAtgqhGR8SUwn382dIa6YeornuwdXIHZBpixuyR/lTv+M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.7ac6bff4.0_1591056923040_0.6162147673521912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.d45622aa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uxAkAOr7MRVIJTACZFRNW5AALJ8CMozyNVok5CRaFLtBz/7DTXjtJuZJYx0JDR3KNSBJN2FYmllL3U24bBYv1w==","shasum":"96770295692b61b44b2c4e920f37971316a4227c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSgCRA9TVsSAnZWagAAyjcP/0fK6WoK2IQc6S2WSzt8\nv097PiG2W0m3Hvm5hzhJCmo+xgSVDZaAc8AprnChzkfNiI3/zsMyfn1rxyfe\nR3Dqec/zTTzoVlNRc5V+23hqtsjfYs5O15IqoAJFibHCqv4FY37+jUkUDE2i\nX8wSAp0B0ESEgrKQc37CXMVZJ+swhcrqwe/+gnYEd67eGfVR+dBfIi4yRVB2\nGusazAYPiRZGpE2pWLwEyJqogUQuQx9urKcxm5AsXPR5OjkWO4TSDyco0nHg\nZ0Z/Ue9hlPd/Pkf3/FSRjah5Ia0Y1JRc4lfxW2RCZSCxNGJoQ46CUptDi5dR\nCffEyt4gzYl9BEywDgj1mSnqCjqPkA6z0/Ak9dfEWB0aJN3oy4o3CBj/KBSC\nf6pArZUi29y2dNGUO9dh4l20l+JM8fNonUneZstMDIcugocJxuQS98YqCYDF\nhv75L48hqgCifekQFYv9yfHATCw87CVviVz0polHW0/+oJ2QwrfEVhACmCbZ\n66CXc+PiLwT/ZN1CbG8qfCdZ2wroXOEIE6tZ58gCtPqobLief2DZciNLdzOV\nxK4nOU4dfnKKq0B+8EtB8FdoI06b3vTIsEVF3rhTkpBf/xtbn1KfeuXv6IxT\n75me5hTq9CAttK3SiMkXg0u7vR1sIVHaTLjzKR1HahVlsjlpmzCc+4bgvxKH\nZBGW\r\n=5lft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJaMMLMmweLRqbKamtpOKL3fV1SSgvhNfuRt9kgISINAiEA1xlmCLPogJafYuJnDEjj1YxHH4pNbuIEVWLUyCMy9y4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.d45622aa.0_1591141536193_0.4249776277987265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.dc26c709.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dHln88o/pYHxdzZNtYzD9MownIF3fLmWSRX7FSPEVLbNa5r0WrMvFdTL5NBb6Ip9fgrs7sxHLHmQnSBe0d2MVQ==","shasum":"eb026b15cdf01ca60dd9d882a6daf171e1eded71","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkgCRA9TVsSAnZWagAAxisP/iiv5E/MCDZrxlJ8d0IQ\nsEtIE6NI4FGk9i06WXGUYBuCsjuG0/HzjHZl8fQQL3wOf19NCMHnegyuloye\nhidhoJsJ0d87nxbft9c1z0Q7w91tZNQKf0RPLIvjTgKPokgIFpZbOlTqjaxD\nXdRE8b3aFgxK5arRxxwPQydCqqK2wK7EZ7PIRdX3+eje6n/JMdTNL2bAzZWp\n+0VnEP/FZ5wAUntAowr2pgO/5Ay6oo9YUgmhMr5m7aMhG52PXKHlaTLWn5SI\nBZNOxK8kuRxpyvG/4W94+uoaw4szKvh+LHKJfae/VGLRNaFdzOPliA5kvMa3\nQrJYItxPTfY0J0cESnEmYRIjP9rlcjjQGn+DTKpnI7YxiZzpPaOca54HeJiD\nyiAJ0hEDD57x8luaC5KvDpKOBFhM1CbXURVRQ88OK6xjF6ubniaUO7gVjsc/\n9eUQFb0j+NfBt2AKMSlGWPR7EQdSfTZ9DAJdH0Uo4ZndyUNs+pTBT9jqVbcb\no3bzhT0arE0tIT0JHHc+jnOsEVbmUa/8/klQTmxzk0hE+k271K10KiDHWwzn\nOOSgPhH0ysqYkpv0Omn+O9eS+z5lBv9Nc+vHD6M5bNQEYBRlc3N8CUxcoyj3\nOUzoDvnrcKCg/TeMVxx+9ayJWnyP4konx0JyJhSP5oz4y3H8A2a0GgPeRbMW\nqvkV\r\n=/1SO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFceDKmi9ROuI9HpJiZZw+oGGZatVUEs/b1neXdVSLUAIhAPmMXlFTl+VwwpPG2TLbaz9MzjnXv2fKBRRw2JcD1jOi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.dc26c709.0_1591388448262_0.41920232396440094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.b9baf6db.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-f+CeVrefY1fXXAd3Pchr9tDzsZEzez4W1ydOfV4uNFS/jsE3vgAXbEdGL0NtfeGy5i5L+zeMDlTRisU33YTEiw==","shasum":"bba0144060a3f66b6bc874fe0bc7ff548e6675be","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlzCRA9TVsSAnZWagAAi6gP/jZhKLjZdavVsbfo36wJ\nrr8vZollKRfabC5DuYPqmMJe3O7gdQpI59NQoxa9tfrYE2uFpjgG82+DFkJD\nGiO6GT6wgYWtNmKXJiYtBs6P5fO+ovnHUXfAYbuHQk95zHS/BZ2h57X4Ril+\nqroktlC7YBoCBQow4xX1t0RkcPTxcBC5+T09uPKcu8Y67iEAPfq14Nfu0pEE\n0qKo7dA3blDVWfDvPyJW+cy0Suh4MAllUFHr2Et7MCyn4O+u4jBC+qrEc6w6\nEbPYXqq1g3rv+F6d40rpeTN/+aHJFwhLFtTFYdzgRZB+drtXfFYHn3PcZVeK\nGb1m/IYo9Y7u0+UlTNy6Sfe9NEEsHxHgtIlszgYVfPH0GSPb6ZK03hStKvR3\neQBQZPdXbQ+Vm1cCR+LT4XglLEWdvVrtiBubB5X16FMn+klswpWCpdUWFor9\nEy1QNCAR33IlLEsbR0hnRLWkCLqDAdMNGPvAP5Y9z+IqpAdT+LKQCs6TmwRg\nhp2uBj1VkErBX9zQbPwEeqKXR/cIovCropGQAXWJY6UIMathGo+OXtezsNTh\nWrOWH4/anHKEQ1qYWIuoclU4CEs61mDcLFNm2F985hAZ/RfSnblUNETBYFpg\nzJxWq8eI4iw4JLTx6UHGuK1yy48CdANn6bWenji5nHROrFkDZxFIgJjrADXv\nrfdq\r\n=NQ0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCCQmO/Nr52QEOfEXcQXSai+i5Vu37Ls8b5TBQAWoeRAiEA6+8lCOaFIw+dg2GNtmLWS3C2xUG7ZM2iGcv5WUdVpUo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.b9baf6db.0_1591388531174_0.7287596886273655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XASlQp6QiCAjoljUHZsUvu4B9XxEATdf0hTffwbxD7Cif5uZlkyr9ude827qoHy4vLwXXdl3ot2fcBQ7W9CNSg==","shasum":"57a74de7c7577055242332d7b3d9d245cb041f10","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s94CRA9TVsSAnZWagAAP6EP/0HoRoYjRjCFVcoqyJ3T\nRLdzU/UN4Aknziliz6Z1o5lYgV0V+H+8u2lqqebnDW++IixOerPVHRBqYO+4\n5Wt105Vz0bTi9zaE2OQEIKNJveuu5jTJCGBQhLei4tZef7J77w3F9PaS6nd8\nrNwEE9CXJa3HlP3oeCnmzqZZWkeU5xcR14S4W//JYXIfhBs2S/Ub9A1YlMF0\ncO0DY8xkKuolXDUD1rRDRYUtEuobPT0P6hUeHDy29TC6GtS8v5Ve+S2D8Pgk\nLk0TsE1bI1elUsdp1+G4TKaVtCTSm+BgY6xy1NCWxno+7t90PTXvErKN4mvi\nzmLCrZDvnfGKMCi4ibBXpxSRsdWl5rjLoQG3tZQ8oGYcslASkNgw6PeRBczd\nQ1OB5hdpDK6J/eiyRtFI0AHfOSRPC2eEO59+2dBY7jl9CjNR+wb1s0ZLt99j\nPVUy+p7ibw8Vs7jL/HH6ZiXqwSNbAv/UDZzpgW/fRnvCsmGdPdLcXcz+rwRX\n6+rLLN9VgdLS+o9tswqtrwSPytuJZmCAC44Icv7oBJOX2RHzMKNsDLOAUvzE\noPN9+uwx1dniK7jTPLmo6ibsiJ1UWrrAwEKQ3zo+vm1YpfC8QL5313MIdnlH\nBAYz5Hlk3RzGXkFctbyr5WOlLQkTvp/w8DD5XJ7yl5HfRnjjA+DoSO0ZD/eW\nbkDu\r\n=Anr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUmhomIxct4plf3lPtZ5BMhf1xYcOd3dTHEeSdizAgaAiA2CGeOQr3xQtgT3zxPxPrjYjcxtbJQefPJpg/1uRXFrQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.e0b8c9d0.0_1591398264270_0.8553934343651335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.51552859.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UpI2i+EKT/tZhURoTYG3RfxDr4nhZ8Nkiaqw5FDSf2l7Ke/huKnpuK00tKkMEBjljFaxg06z8Gfn9p/kXszUow==","shasum":"d2a397d5e34094aced750569635ed823b5c3cc6d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRUCRA9TVsSAnZWagAALpQP/2r0vu073o9ZNe3KBKPh\nXeFM0nhbOKV+a+9gMOdmR3a/WH1BdkYHzi/AO9RmKuyDmEo367yqBhKPx8Jv\nzL54bMF4/9QKRBB9WL9mL5ID0dN3NZt5GJoVGFTh36depE03KgBvY3L2X8MQ\nH0rIpa99kFht20z7eg8pTB8mQR5DojRCL1wRJCLpPJ4nYdSD7J7VdTJ/AVo5\nIkrLZNQs8l40xq7J5ADtAJe88nXCGuPsM8pcqeGzT9MsVrhq6U9hGbwGsj2A\n3zn0cUWbYMbLLdge7XO+Y3MK4O+eoxzDPiZ5HRQIKCG6u0ItPxFHOQPY4LFX\nF7d0vFsXRJvemz0S/+PABfqByzt4kzHo+ES26mJnG49zkKZJfZ16LX1comPE\nXLIe+v5U1ukL/J8ZeXCTXH3K7iS1XfMKKJiitmAfEY0eti/p1shU4Jstx/Yw\no+oumEQQozjxsU8VbkFNO3Hfk4DcW/R4Uzll9fRAzxyri1sIfoc1RC+YFmQJ\nh9/GQa0cMNW1cvq2ElTTzwSyTqfpmm4GcTLQE/KJZtmHaKDT/WT5HOwjNCxE\nyJTq6s0HT9yqo2eA2DxxT6UVmdbIGa3LdijIP9TuQkUKFA0xb4D48BAnbXHn\n0t0yT9gKFiBdJJM7q2jq0+HZOf25f2uRaa5RTEqtYuXyj4jde4XeyCYuYtcB\nFj3r\r\n=DKQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMtNAJ+QqwO8rcJ09Tfn07Xvpf7LEMvTZ3Rw8FS8p9SwIhAJTrsL/25xW6OWpS1LsTJ324q+hII5Ntddyz7mpqtebx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.51552859.0_1591747667823_0.10652874551774949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.2e269285.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tMHRqNrBC89/h91XAi6m5/NqlAxY8zEZHEzkPp9T50OcNZH4a/xLl88Eqt6t8c8oVeQQNt8SkYISHPoRYcjSlg==","shasum":"93be2c1eda56ad0905c53b04502bec322f72d8de","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjjCRA9TVsSAnZWagAAkMIP/jSKUTr1thFhm5lhveSx\nuIB4vVGEb4EfEHzYuwKCizihFMcgnjNhMruvWMva4x7OO7g5OqGFTp9zdmln\nreA3X5MzaACEKlMXexZ328vQUYUh4VLqXAQ1grIuHHiEnFtB8DTrZEVlKtZj\nu9lwGknO5OhbVFlupff5U+0kDmnmdzrUKwZpVfeY/AD8t+zNU7H2J5Wrdu7A\ns7KaxH5kH5dMDsykwVEBFuOtOqT+gOhNIo+IcdnsIYBzlEn8j/TUcMNQShNc\n6M89Sfi+guT/VYpLmUKu62zQqXdwEWuFzKqq4iw7wk+RrbUcIWw1cLrd39uy\n8KR0yHBp4LOwrgfcYWrptvdDOCEcHbJXpxngJgjZQ8AaSjnKqcMck3pcmiHk\nT0N4luaUU4lVAM8/OEDq04y4Zl7wCNkLa1KcvIPID2OpCxIqLEq+tp55bL4M\nFwRUK+v6AetElLEW8f+jkbQ/yj7aPRqvGY+aMF+v0V+bebiuSHixmjg8tEk2\nIIGzUaYBBNRFrmuJPdoFKYk/jAuYgiYsJnRUvcIvy82p8Oy+BW+wp4k4JONq\nugKd6fPmQ7D9liPFUdq+BcxbPOkdyxEl6kS5IT29aTfrl9xP/CqLp5zzzded\nosdn34LrfK8n4RbRsO9Sb8k9qsS9P7j9SmXx+Vw2svsHg4a+xc7kXNmZO/fG\nOVOu\r\n=cM0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgnSUq0nNTr0TMiVCEXsETme2wwE3VCtnMnXECQqzt3gIhAKr1vK2/2Snj4CUz+UQnChgoSmIXUdXjHSi5SWfpXk2u"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.2e269285.0_1591752931149_0.05367651623705649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.be138b01.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W7UnjgqgOiVWAI/Ids1neWHiM9UXpEcEVTSoIaaCZzo8F/6d22oc4+edBW8XVTxl6Uz24Sy+JkGyQ1m2X/xt3g==","shasum":"03b5a28298472d3ad603d15a6ca68cdc608f1ff6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Uc1CRA9TVsSAnZWagAAP8UP+gM+sWn50vhV0ai2fGwX\nqt3hcYg49mFDxwTHCqqiL+qPVZ2gO+ic03vkqB7lU9D0yG8JB3OMyvB5BRZu\nR3wReU78JAQCnQuHt7tI1p9jodH0wKd/NtHvpfLqyrhLU10CUnTn6tjC3pyC\nlgfgCdMG3unw4cmYmyq/QOCdTg7fSCvzqPGlwv6cIQZ8R3rqQpPtk57LfaXF\nOhdJiwklOD9Itf0qWkYPTomAGXtNdIPswo6V5SsJgl07t57ucgdajjobauJW\nVUOQ5WBDKszFjMG6Z+Uitq1Q7t/KAro/sjlqh18cJ6STSa6OIyKPAHMqaR7i\nNzY6eSW3zUAzU/ZeDW2itReXRn2VgzlVHhW3lQfbr9PsaLmaJP2ZwbHzn8wU\n2oN1m5YWvGUYgXH62snK//7oyB5NHqYY6lMDP1zKRyOXy7gx9WEP+w4TQhdt\nNCDnIRIo9whLpJhvV2R06p9WInHTud3/LERRqg3pUkVKeIezM3ivbFFfFH+X\nknvTCG1w28ho4RSd895fXfNImPtcgS8h0KmeFxbJ7tmzF68PfZeZLR4kslIi\nam03DIj2ifaouuNcF13mEnE0+8/BOBJp3Ql45q/hCiNfNFcwIxH+L9Gtz+O1\n3OyR8g3KgfnwGwnioVWlWmTZ5NdYimhihLpznDWltOLk9jfNiNYEEHAVqDWp\nU/wo\r\n=vwRD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjEn6w9b1Gzl6k+UexlcGkpTRoyUm2usQ8rfQS1XVkcAIgST0YYt5/sTWqLyoXXqUkU2cU0uiheGLgLRrz5OC1kUY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.be138b01.0_1591822132909_0.08292731158459943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.04bccf5a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TNJmrqgrjqcyKG+aOTNCNYOci1UGgDQJsBLPiwD4xp0tGf71fKQzHuBgvtNAi9H23SeKVkWKkQdJmsRoPAd64Q==","shasum":"adbbebea6ac4e1b173945936a907f3e2ac8e58fd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BkZCRA9TVsSAnZWagAA/UoP+QBrZX+o3v0zSwuAGMdX\nLZYWUMZ7OpaY9oQKKuA9XqZuXeq6c9IIUwy4pWp0FD7oh+WIlxPWS7DMP1b9\nJe7pZokOk2Fxz2zFapXz0Gh9J8/HVPTV1pRd9ak//uCWyOMO3yDMbgxHa295\nOdCvbQc0Hi59lSFmmst/BRlVdrZZplfJF9QY497x3AMdpAuUO/7h6y6fM8qE\nxhEfrEgb2f37H2A1HQkcEc+lS0fq+v9Ze4Oa+kMaUu4fTKbCbBTiqPF+uNl2\nR4yuOfozDyH6R3Ry5fo8VWe5clhe2mQ6GazLR2q04E7KmPC6aV/7bX4S1Y4/\nL3/tG6HhA86fPglqgIP0Mkc9+mDMS107HsdB+DmZ+GjAp5vAEC05E7tC58ZY\nAmngjiX3DvP/HG8v2veHn4KkymMBqRDGow8+ikWQ8kGA/eUIuTbFlMgWMmnZ\nIJscx71ltkQEF2Zx7A4BZPrdfsdRM2bOxDeoxB8N5HJtikQFWuuRdZDvr5Rw\noFwwZ+41Fb4F49AHzBUAo+9d7CLNDEWrHghDqeEGuH4r9qNnz+UUKxNwDN9P\nwO2btEzGqs3vru5FGIOo4LRtEk2u9r+SUDEiQgeYHVhl5gN4DbVi9FYDz5q8\nneMwwEgC1BbSyYs59IH0zu5+8dw9RwYW+MPMTLPAvbiEwb+3f9P0G/nkcY69\nHXT7\r\n=QONy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+fAw3RcQSEvrVDMlDFYhjnP5IIWRt0kz3VKO5ifQoQAIgQg7Zjbi+1sGD0FZMNhi4WrthSq1kKBzAq5oEFDK9B5A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.04bccf5a.0_1592269076820_0.7248052562956664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.b44dea36.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VY+KZiiXuMfvtSwirEWs/u2mfb+K7qWXLRufTnpGlVY3Ay98/yl791FxrCj8EiIQYOD1Jk3G/zUBJNJt5gedvg==","shasum":"44893ffe46416014877ebf49b3152cbce01369b4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TI5CRA9TVsSAnZWagAATAIP/igqIUfDYJQXiz2jmcAv\nioTYU4EnAFSQP7Oog6D95Y6QF+5I69rRTE71Q/SJ2EXzpLOqJAA6UQ9pM8j0\niip716CPCfcM7e4Nq0Sa3rfhvWvJ8MSdCDPupHmQdhsk47JLNmoEhMkwsCDE\n5DamnivIh3mc8MkccSXvpQ8NGMV3kcTw/SOgzIY4Qygjwr9zwz2mQGFW+B+v\nNjduHo/lVNLZl0MsTLPaugq9pzreAxuV8dQsehcO2csdqOnkrf27TtAGUcns\ng6tJOf0al/1BuD6xSCWL0YIY22H6vJurz5uERqZeps7AmuwIlGjB44rrwTLE\nW7fAKsTdscd4U3pzRsFHszVm39oj3/3ydKiz9sjzvMeYDg8WYiAB2X5Uu65F\n3xHc00dAqLC3thmmURHGi/8+tiKBXkUZiYbVvbfpEX7a6mW502ySgSQc19D1\nBG1Ld/4s1b+Wrg+1cRwJKpkwtcBk6YFrOGhsH8YE85Vv1pxJ6Gt8MBPSLrf/\nAinltqheYHbighowwMkXXyLLRNt1CNqFTmq01o6cjhKlcrwg0sandPgOpumB\nK7YQDrTXIYBgV6tU/TcCx9HsxnVsmtqtr0hSPfaMLaKCreNTE0Bf4NASJDiN\nTzV6rleztmm0AV8/yc82Q6NnIEMMFFCnQOaqIs0aPSIys/AtcwfWu3TZuOIs\nasDa\r\n=0sex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA2yDTY10fibtxHJo4MSHVAkN3mcmnfNbrEy0U7Io7RwIhAK3S3XIVYuTT7UHxek/YgNFUCKzXiUbm+7j1g1SYVXDJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.b44dea36.0_1592341048745_0.29262666546110916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.e2577e87.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5PC74vkPcL3xLcbF+T+17TRwUwMdUnDWoNLa6GGtEomPe0B+M0a3s+loOs3zQrY7DUQKCFpuL0xTk/Ms/YQ3AA==","shasum":"35eaf915bb8d5372eb81d2a58137339196f536d6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTKCRA9TVsSAnZWagAAG5AQAIjlVWddZcQya4gurER+\nNmSOo+IIUKaE2tsR+CpZqQuw1XoGykm59M7fguj9Dqpz1FVtASDcpFIWEi8v\n7ERzEIuelhSsMFVA1KH9ppax2ZiordDvGfODHDZw6Zo+iUDp0P4CJXLlqRbi\nkDxNyxfNlOZGyhiOR1zPZe2pxT1vp2IErT2WhlTFkouUbPNxA9w2ncsTXNRp\nX6MbjKU8KEqJw87nAHbG/qgg3pdoAIUVtX6x/njB1pDhc9Xc7HKJN1JL/2t7\nxlagrjrbsUkbKK6bDbz3y7dPsEhv7n0v+vimSQMW+/Mi0uMyFf/e4C3S7gl/\n/4NVVuLa6Br0ev7KZkYG9teNRbByxTdOJaSG4FofcEc39yYLp01hjupiRlXA\ndMJyLcABW4Th2UpAXzhiqcTAGhdm4ytVGG6e3n/TDer39lCIiBKh4v+IhSIf\n9DVjO1vBSJatzvQQJqxLVcUzeeioVopNKE+MKd8UBvgk0Gfu+I2mDhRtqc2t\nsPdH9kH1Z4cWceWz+LxJOwWmmMOy735OQ6zT7clZmS/WxEqqT3ymFnKCKzYl\nNSZnasklJIBYh+n6Hm/I3SuZsT+Vthoi8+aKig0TEz4RpJdx6KvzM65nRzo+\nceUJh6phqtEyfOPKSLmHyNUkEZE2evBWv18Ug9aorGDsDndxRQxNL5IdwWN8\nZ2mt\r\n=9cTX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdo7+m8ssdr5OGLJdUQA07Elszv8erd6NEhxNClAsfMAiA3n+vaXY+JMjHdTp3Uxvd/E2T/Ek2BslPxjdGfUMX8eg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.e2577e87.0_1592341705972_0.012656814807528338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.58b73343.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tbwXvJIVxoOkHgilqX84DHlGgW8vfTN34fBLr01mi3jvk20ZjDPpSuhyVC8MvmcwrzS5kgy93UTZ43zPqhVisg==","shasum":"4b250f80d894d583ace4aa6ec396e47abf7e6512","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThQCRA9TVsSAnZWagAAhCkP/1qXYXr85ae+ZPoQfjwc\nYNUm/zAl/wjmcjx2ghXGFFgfML0uGw8RtU/aWRmJ0XM12vE1MTejm1+IDkcM\n9RTtFxWrgiqQX22CSbbnfMDCEPmlJd88SF4wWMzifcDZUcbiT1gDgapW8GQ6\n4XKGie7ZumG5MbQvmY+j39VQo2APWKr8WTLR1D2DS7266vEo+LXrrd9jR1Ly\npo3r9iN3l/uLq5f4szi2CBTP+ahhbpnkIQyjEyoq37RFmt5xoFgiHN2BymNc\n0HqbebEyYuVCT0n2A5NvMQKINy4rUsRvcUrEDH/KAKsXnCiTuFvxuAh/oKsf\nCXf3apYmVIWlfMFzacfdf169tvZqihN5AqERHpKnxERmCepqA2SHWFKuU/Xo\nSgVHV6vwPIe2wwzzXx4vs+lWb9jx9/O7HySde0ykSsX0yoEGtVsyAQQ0SDyo\n2U5FMZXrro4IikX5Zh2Tfd+7lvW87H7qSC78sckNL+fPo4osOlYhIDbyId5G\naUN7nGQtuIOAKVbD+FGxSwoDUAAGsA1ucBAHBP4U7vPGU+Tpc5RGFpCh1gIJ\nkTm7hYSlQ8ul/0o3T1dx+hLLvdWMkkC+Z/KxOdtZbfffyNBbr6oFhY5Pe4iB\njjREaE3FmuBgDevRzs+HPIB3JZhPeVGi7Wode7auMgqcnoc1qboyiLXXTyNb\nKHIj\r\n=LKoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8YMh4KfIg86vjtvufCQPr7nVKLXQOeFobugJGNrgqmAiEAjOL05LDcrqagiWjmMEPZw07ZCEz1DLTzCv1BKMQ9XeA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.58b73343.0_1592342607624_0.061287067024310415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.f155c058.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-N89IAT+rN81hMHq8hG83zzyHY3ESTr13+cHNsBRwo3th8zY23ijyAGVDwTmqG3vqfShsf3u7lds8vdCGXGH1RQ==","shasum":"d8892fe64c789c070a30daf1d8e0615611db4f7c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661oCRA9TVsSAnZWagAAzEsQAIz/NwZdcI/zgYtT3BGu\ncDx8ZHf8soreLelz425YhoWAAFv5uDjYHfUnUAbHZgSBTa9vYaKnOZRwEVx6\nAJk/ygh1AOO7CsVYfNCrdDKTchGhMyB2UJorst4YwcUg5Nwm3/tSKlZiLFGv\nJMLpCyLveMVg9FKc0FrJBqvvjyrHcAagOSZP18BqqMuhrrzbKPij/NmSv5HE\nRVS282WudG2misajibxzmQL49qgnt4xSvu4kndH+IDrghsi7GP1AiTcezZ2t\n2mER5O0WRBUBqoifQdXt/DyqQ8Kmk4kBBy3MFN+Kzs7vqmtIy66Spjs6wjbA\n3N7miK5OgDKBJwC9QMrQhHnynbdoL0j1RFY6ALKQBsJBp5enngzh5OySop+d\nzA0/cwJupGWgIgKOImPSGMw9x28CANfqxIT4lNnULJ7aqNTWlLVmqAGwEOw4\nezRm0cgfAQf1J5k31LMhrdiC1ubt+H3PcWSmhMd4opQI3QF/krdP7FtmTav0\nu/WXayRxW3/RZ95K8+aoj9s+G/fNW0jYugoqmO9CH6zDV/yZTurw8GOgmxHo\nhLAMZc3peYcCdVwVIY3NWXgRDlpOq98qagbUQYT7ZPtpbslf6xQrworTtk5p\n5SpVCTnwcYlpDUOZMb4wq0JLYQetATtNWU9shnmqC8JXD/Bl339pC38TQZSM\nb572\r\n=xV8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE61fMTwh4ZyJvX2NLVhPfBoTzn1bPYy4ou93s+EaVb5AiAwTcezr2dJW5M1I99jdhgNlZFVM8wTHXCHeLo0wCng4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.f155c058.0_1592503656468_0.10968541768011031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.309779d2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mv2+bz3SjwenNYvUl0nYxbcwrScstvoB8MkOlpdUDCV2nfwommv+xZvde9oZ6bX68Az+1umNCyEh4BA+3ZXafQ==","shasum":"693228291bf5343459761ba24f1bab44f6d5dc34","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+dCRA9TVsSAnZWagAAuRgP/iKkf2B59MRtOjxDVAbv\nAav8z4vuJBQs97rEfgZWHKYtGJgdYgniS0M9ype/nA7VDnxqYOx0Kzw+7rXK\nI5Ov88r1+eIstkLEtGHAGpZBCiHr+1pAIVRExC55cPNZ6Tiq3F/tEDKKkYps\n4KB0eQokZ/sELBNCG4hlU7EM75mzxf7jRNCMZpX5cv7rJyGe6vLbEOL5V8iu\nC3QKExMzo5ZmeXG7sRLQ3PbiRngaysEvVudh3Eh8+uiRmOE1rJBhTvpKVmun\nRfkht7NiH9RwzxkU3tU8sl4uTWSQntDwVENUpLummpUmCDGIaGry9ri2eh1L\nbewLCzxKP69RskUZGYPpPJXfZnSwtAAjpWvc7/lh8trDsbwVDT0Zy3bATpfK\nI6ZaO8Y14vMYiusstmbaM5osg434Lk5qBAA83GFxdk0hf/xKGNA1tLUBqJc6\noamD7lAaar4rcuCP8wbITGOThk35knflLiNbbjnsaVOdVlv94JDup3J84B1R\nVwqHF0qY4nUPnE/JBptqvjAmj/nHkUDXCMIITLZVpmWNUs014Ol5acttt6a/\nMK700FTfeQMLDvKvz29c6XRWydrRAGe6zqtdsXRt1onXQKsHnDwJRBYoYQek\n7QNRXMreqIz40c+6JEAhANcIhOQGvjg8GqJU5PpJUH+EnyjPUIFpOH5UPXma\n91vK\r\n=829w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoL3lwB4z2iNwZ1XpJF+MTUOG+NnmC9+rgWdTtJJ1qoAiEAsDqVtnAVmSEE2V+/vBBkAhqWlI7dvPMPloqyeZZ7xm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.309779d2.0_1592524701117_0.12958798210993128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.e7649968.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SIlX+AUF8VLtZRxT9GxIune4UzuDyrPPvRSXW2a5SnflDXDWYfMCiU3W1wpk1q/2PhpOYjpyOfh3cmLf8u8zKA==","shasum":"d463ef6000e6c33079020340d18e401ad9adc623","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDRCRA9TVsSAnZWagAAzggP/0GPQSH8xacxUQvhICxF\nPCefK6GDPfSLr6xPQDy5JT8eGak8zeBlZ5/ppaNE8XvyaCa9l2ZxeB0NjBRb\nGniij1gmTSteTAHr1B4NoXtDBx6Iq5N959/Srj+tK0r9zgmc7Mk3xGxr6Z0k\noyHzpgu0hYSQuAYFLRU3DwlUjXLOwt8CR0hGYpiAbt5ZZCFbUBpBkrPjGSPb\neJEg/aY7f08zmMvwcRTdVl2MacsQhFvmTbMRgginnZURJJFD+9MnY10dQkWS\nzvqdYPVrKtLRP9l3apLIRAB3mdTy9a0CZ7qODBNUmy/6CR1wYH5/4v0T12W+\nfmZDOUZS1bcH/l1IB3Bu2kacZtJ8OFyrhgJwDHBgEnsr8P/EJhmQYk/mDm49\nhW2CCcimAYlZkWRqCO01h8IhejUdAYRy6HknAJOQfcrPrJRwH8jERjpD0iHR\nTX/3+jdnr1TbTcweMwbebe1M8hKV+USTLYQu1xPpURmsPO/sbTIlsEoeqjGx\nwZIr09C+CZk0hr9T8CXl5KF6o3rwkoBBpxjXA2gYefo4qXi3+KyGgNecrcC8\ngpavHc0gjK3R2cDOImLjKqGq+SNZlkrTZH2H5uypoTJrb+J5BMLBEMD/VkNA\nJHd9TEaCspHmsf+/WnizqOYVjNv4UeIjHUi5XRgEHe43te+t4JmPMjgb9nPV\nZM2Y\r\n=C7ri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfbbrw9E7+LxzqNx/nceJ7fkpBW/g7n1hlbOZfgYugMAiEA9EJWEmmEq33kW9vZjcxjRHNg9H8DPQcSgd1ljpvF6lU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.e7649968.0_1592602832835_0.375602163511338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.8e21c78b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-89EkvtfcTFMkfAHxrAix8umiO8bx/J0haErl9zpWlIO9tW8INz6+d6UOIUz/IK3KCESYYkw2LCZBnGdebpwzow==","shasum":"cf5db3fbf955abff6f71d1f20f10486be9e16196","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InrCRA9TVsSAnZWagAA5GYP/iNqd8u5H/7wLZTWwDNi\np/n4S0el0nBVuMl7XzhlANpJNsa/1IGTLklpGMghBP60vRecYlavyPdy6cho\nwlnE6loUV7wZ/PRqpKffV9SkMdy1hNJ6FNCEDZ5c2Ee8KbNG5375rraMcDah\nncfg6BUvhkIkFOXWQPv2I/61VN865QnUbOI8+S4Mfa3ALIQqIIWC8/nvBG5Q\nNWnk7ncMlywuHm4QYF64kXCQEeUzHcsCuHmaG7UVEexwTmTugqdoDCL0xW8l\n3T5yBMDvsKtZPXt7XSVyzrhg+vyjgjQY5AhqVvKEQKx2RVXLgBpWCKn5feP1\n1pvVk8TOv23JxrbKdwKHLM7cTrJGb/rmAyElepEAsxAnLyZqmXwBC525Efkf\n82yBon8gliA0Aw/Inn2eR8wPRrKOjloFNfsgL4cgqaEXm4ITL4zbr4jb5ESg\nAlhpLwUiCjARcQ6ZBqKX9x2uYe2peX/r9EzBQ+3VjtZ7Zr0VORHBfGLvs955\nXaPEBNpTSUWvBp3jmr48KtCTCX2r5PspG7HCsDzbb2mINycHFhBSkU6anKXh\nOCPU4E1rYPYr2vESEFLMluWKpmG+IdIySg0L5ki4KnDSnubN5kEFx3/vZa5G\n1E80wC0+x8mahpLVvCwGPuM8kB3AYhLyllR2mieSOPdSmXCXCAldgV7qfx1l\n185y\r\n=x3em\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYPorXPK53wEMl9UV+5aUcBDLiBTcSDdpnpc5+9lGnVAiBRpjEYm5YFAOsUUgjlVLl4j2fcPfRliM8aSWRqSKj49g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.8e21c78b.0_1592822250664_0.5894590926704653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.6db76faf.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ODVL17j0I5fV7texFpINKSXBJcieAEzrEJPpVr8QSg5w5h6xdGKmAJrHbqj6atkM2JDju2OHAeNgvGfRJa1NLA==","shasum":"ac7baa5128c03e8a05f7b238ae4ed1420ad11eb2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R6+CRA9TVsSAnZWagAA8HwP/i21V0R5gpGSVAX6Kqev\n564Xg6TKXmUDc1pFLnAVPE6CDjInKsUAxgfHcGe33dTgRvl08wf8qVa7qgny\nW+MpXk1Uz1tHZsOnJorHNnmMTq2yL997CFOQ6c6JkQ7QnDpZSQzY11TVSBJB\n0Qv7Tb4fC4rEqPRMyJXG+qcvo5CFr6rBSi+x1XeXCy0lKC2Tev0Iom+G7Dpe\nWpNgpeY8tz+TsqFqfosCI7QORlgqXMFHNE11U1Kmh1Q48+VtIj/LRmKbeTCu\n6xmKyU7M4jTCuBkEOQYHpI4ol219EUh6NMKK+pRcpWb9MYBHbWyuy7y87Yrh\nmlnE1nVSmHek3/WCtuhuc2gFLdlLtCRhSTRWmlmmry4ZIdvjwwHMiABPbsjl\nXDo2LzD1XOaLzY5yV6IiAAf6JkJiGYi9DzW0l9g1YMVZyWuS5JA8i+ZEFX/V\nVG1lfqA/2CgcWjsQnvxOIp8IQNixLaK8n/tiX9xEorFznD3Vkxm5OWsDS3Zp\nKUJgJwWqX5b8MOMgtqlDtHdEy87HeC5OM7mWivhFq9c+ayMXfjN486dDPlhc\ne65V73JMVgwertU7PeZcZ32R5M3xMOQo69RH8tw69rIbu94C/l+MUZRpgdVx\nhIa1m9aa/hG7v+amCj/TGYGDQNp2FhrRfHcoc8rtSB4FeunsiISZbcqNJWz8\nNfTz\r\n=5Zw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9zp73Fjg1VAwtLaqYZUwDVyZcY3jgrmI1PG26ZOCGggIhAKXkpSF9+GLFhLwCjT6I7mCfsyzC8FCqyaG8YDdb+aMl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.6db76faf.0_1592860350610_0.7809842542188321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.c4dd9684.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fMps8NIoIX8YO4lHjYvhrJQXPdmRmVcYAyuUH7WV9AW3Znem8mBAuHDgrP6PIcQBy+zWMjzuEfUYbeppI9+DCA==","shasum":"c70c6e1588c046a9222bec98ab9431b4eaa841fc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxjCRA9TVsSAnZWagAARnUP/2bFAN4C9OtVzCsYNlIP\nLCmnae95bJchp5W9L/TUcp9oMwXFEwcDjZ2DTVF+A+qP6AAoAZExoYQTNaFO\nfqFpuC1AmLD4vQhQBtVGgrPhrSg5udiubPXisNlN4Iwn6l/w5mOd+7YhlWd0\nCuQQJRGbi3vCmdL+/KU0zTuVS5u1QcCTufAQWaOgkTIFkX/ty0B86dhFHFTH\ndMyQeSvGarqCEpvEuriaCoIz3wBjDceeDjAz8Dvod/rbWXMImHgrQ9xNMjDN\nSgMX+Bp/tiHYcKqVkH6pvIGsY77QGggrh+sRwJysJYOqdH+Jbe8ko3r1BkRD\niw28e1fatLai4/auIpuGlukfosJh1flAaL6PBmswcfg3SG6iHuoIPodVMfVd\nToFE414cKT4Wyn7VUbreAXJ2Lu60juPTak5QtC7l/DMlSQHceiHP1XsOeb5F\nh1+Qt36XOtFV/pnAAfoM/zmFmw/w+a8QfmIhGKk4/tbHDgzG95Q/ylQt1k2Y\noDaR6Dp79tqHkRs7M0I19JbtLWskBxIQK6BJo5uyfmS5hX31Gb9fK6Cul1wG\n9tsJ/ZJyR9inu9Za2LzSJhX3OAglAAy4rgBPgYU0DU52shTFl/2/d9gtyYJz\n+sfekueRcgjjeJuwUPG68+ihuJ+7LJ3F2fyQl4ai956WgYleIJVnMGOkSzOC\nVKiQ\r\n=SUoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG4YRvrv6UeVe47946SGRbxHYk/Uk/NyFXUjGEd1/WYQAiAOGi5+9ytMkmajFVv1U+RRHAMcPlhLgCKz9pKx+fkAWA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.c4dd9684.0_1592925283166_0.4548171835796426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.b3e53981.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ue/ASLqtM25pI21Zv8sSp35crWLOvg/bgknxOFQ19GeWNU9AGigjPaXPuFDPF+kl2QfrYmUDAohq/qNhlRAOww==","shasum":"c9b2bf7e1e4ef5c7d83f730132fc2226cd21ed77","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCcCRA9TVsSAnZWagAAatwP/0KmwGesIzX1RBtgkpzU\n4CIzi+kufI4jJq7XbwwpF8AsMoFVO63b8OicAC1WpK3dHRZskHl17xEOmiiG\n6Q7jTiDjVc+TAX+6/Nj8RkMOhw1Mur3CN/U3GNzZIwTx1emCC5QB4pVbiQ3w\n0+w/WjoJ5PscUYlR72SBGE7NiaBSVe+xFWkM2li04wI6dAUjcjG+Yf9sWFvB\nqifb2sFf+26G6TABvoGwtoOJFuid9/A/GAascWiBdjNwbqF3f/GPFEbAft03\nOoHM80KKVe3mCvnt/PT23LpLc510EKNHWakjsuQAEI7zWGLZ6JdZgIYk1F8g\nMFp5Cwz+vbqbRpPKESC4Bx+Dae+bGYBDtTzTh7S+8OYnTD8GxV1h9nmCH5Vo\ny8QEMe+vJx4AXvJAB/YO/TogJEsRYngjgABCK0/TYPM86inkBlQ/jOXCmRqV\nZQNcllKgnbPGZSXkDBgmKWI3jLal+OJH/xMEmSzFQ+8p4UoisqHGfMJG37Dn\nDXeso2mFJV1d1T4FS5SiZ/m0GOg1kGf+NiI6uoIFRkAYXk4jSYVc+G3orgFV\nYsfX9dwVevg7bWRs4FXa7h2viAPWJC9j6pZIk+QSmLg7QgT3JlYj5jssoabz\nL6Uzz11wxSizkmjGARv+32fAMOoMN25Q+dRfDlOdVTFa8DGqDGAxCDI+5FMz\nOKP1\r\n=FI/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyFWdqDpu+X9C6UZdiG6WfjchA7pkgc5I/WRdD8qp1cQIhAJIt75ctv9RM/NPwLHEsLVqEib/ah2ZE936zX39ydlFI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.b3e53981.0_1592959131896_0.3044036939956034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.b9468f77.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-65oErNGXUdNJLx0EttyKFCqQo03B2JBCklTttS5KSA+/yWv4d0wnP+SxpVY4G0DEdJpvyOb2vPVkBrXG3pkt8w==","shasum":"5ee07835aa5d73e3927863fce4cb0ca2d584c637","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uACRA9TVsSAnZWagAAMXUQAIJ/EaCNYCkhbwaBvWfp\nszmySFA+6r0rnHrZje+zjg27iztKIjoG/9gFkOai6tnwbBB/RBJ8+Mf/1LZQ\n1JsH66jywiAiVcEmiYJMnv5AxCzUqERZp2JIQAHJ9ijRfc3o+pH0ke+0u+ha\np16qX4cjHwjN1Z5kPuH3homPwLm+Bx+sQ/mhFGU8FlleAvX1btsEhL8IHQ3A\n9tp+/7LBYXJ1mRRftsMxbMrClGjIOvD5J4AhArTRxAkhQ9WTaX8JblXz1nte\n/S7HMI32b6jyuo8CxSU6LK5w6vh1fUmLF+L47r/oIY7lW4uECZAchv+1ClH3\nAM9h/R2YR9DHM0fqItDQUYlfkBPY+4wIWc06edkY1g8lcXFLbZiZLL6F4aB5\nXHgcGMwdDPS0OkOrtNmPt0hLsZc9Xq9cyfmwUs8T8bKII3ZZNeqfu8T4nDyq\n11EDQ5KOYV+42CG1sS66PMLxAxKawovWrkhBP8CHRcrAMhZkhLQGPqBzsO4q\n056Jtbdp8bE+sngk7XsKR4Hdrz+Ek1P7mcVl94TQ03EW+zq3Zi5M2KFfb8GU\n51ZStFhwF/lfsiIPG7g0WdXk//WhE2ZDFaLmbAVqvv5Xc0r/fyQ1AjN5Kdss\neVGK9Q+XdgRdyKlNZTVdM3dObBXjZyrHfhGOT58k5qmcOWSNBE4QfYvt98Qm\npuRM\r\n=QT2D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLBvULeP+vqCQv8+1dpwBAa9TXCS/OKDls4EW0FZpc7AiBaY9k8Y3hVDfNF9EuVGtjp9qmFueQfiIdeqp9FYFRuXg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.b9468f77.0_1593035648095_0.24026306764514493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.eb790e49.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-N6/LW5AJwp9cY1hx7++LYh4khsDqvQ7bH8UFzHYef8apb9Zmg1BeDlmnSeL+o4bTSdWVHL5pPwCQpHyIcCCEsQ==","shasum":"d72f1314eb73918278d8e0299ed8d89735f03c07","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RSxCRA9TVsSAnZWagAArDsP/i2+tI2aUPLi4E0AZyD0\nKCS4AA/eQIvwJ6FXwQflQo8R8Li2Uu+rspGZOvPMWQW1u+7RU6LuffoZluuy\n35+T0K588lyUpvWlXgrocDRIg5Cj7FdbV7h6e7W/0v6lvun2bfclqki8QGFT\n30Vr3hi+fOsqJ4K2yOlR3OcHwKrcQrVWzEGPNhYmZ/UlPbbZ/SUtrBNU3n05\nyHx2kRvzV1bWWf7WEBOh4NKuHRWWZ3sJ6WzMZY2LRlxl4oxj3UJOwtFxkfh6\nN0ax58b2jZKhI+0Zt/oSlNVYfTjFYm7VEnio1xttMVCbIlA2Ckdomu9hGYUV\neOlF/wIiXu6mWd79s+8vMATUdPnyGxXyzoBnApChiwIe99y3U7a9P0uCgjcm\n0MuS5zDkAh4BLPC8aAWnfwMxxiH3ValIsaih5CQEdsLtk/vm4NIexe1xeMsu\nOulXu6T3WpRN3GSi0Zmk8hN6VjMSQfcYWf/M/eaQl2zOuOIFN5BAw86Upj8C\njv52AQi78h1ueekAv0Rqo8l6TWkAKsDAjutiywQl/dCZ1XUMgUjz2aYc2y17\nt4x4Z6ueBtRxXT6sf+0+Vbn5KR4wjq9dYQpluBX07ght7Lo+eqEEWgzhjPjh\n4hSv0FNzNO1a+3r2lAoJOzhuf1sD1DmrgmRHgQNhMRQVZRwBEeK7fZp3QprO\nn8EZ\r\n=9AM/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0FsxQuv4rxz6yuNIl+J02qwjxBIy9Dusl0P0K6wLN7AiEA29h7ozHflS2ZGaEeFtqsh3cGd9k5rvuVWFIcaQb5nd4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.eb790e49.0_1593119921180_0.525417855853884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k6526dP0wU0ttC9F2zcEanm7ZP4uYH/bS8DuZWJT4XqrL09R5V532yWT9H5d8da2fDlBO+9+f+OYcCQI5p2RNg==","shasum":"7c04235aa1e76c2c9dc586ac0d57a7e6c9f4a5d4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iq7CRA9TVsSAnZWagAANB0P/jbtZMwJH6PkVIL3tPmw\nc4fXvf5RF4xC0lzhrvPGrRwropTvkGJDJNMtfbnG4ahZ6SGs23VPS6LSuUxD\nmHrktalVe8s2+rgHLyjQCDlptggyktf87N7CFL3dSeD/gjT/Jq/j7xryMg8A\nz8EoQx9k2voDX4qDah3vf/7olR+ThVRSxE/GRLV8iAr0X6QbzISFRT85gmQ3\nqJVKEEqTVJrN5/jQSjTTtX0QtPDOM9kKm3xVVRJSMUcDMuy9i5jKNRynSVjT\nLA8ej++cbfygtG30x0NLD61jYuTxxQY7KgmH4e2Rz1x/j6YB6M7kiaxEuo3P\nBZKqyPSL7W0+UJQ3rBASiJ+e+6/LEZWRLEO+ldBmaayeQgNLzppnKf/u26qr\nPUM1CworroLXZuohc2Vl0S4oNU3mG7/2A1QJaz2y1AhJ6McjdPIkkCL7S7/G\nNmke8Ftiipt4UOrnHrKcLoj8XYbbmkXKpo6YlI+j1K0PUgj3UjtTdFDIFYX2\ng/9hlBjyXOGHr+bDEh7i097fq8nWsg0ePZ6QrkCw5MIzvsIHXzMRJUgVbHOJ\nhdhruWE85hQhsXxNQcF6b41ESp+4gxqLwyhLC5FtYj3RGyKbIjH3WjoLEzBv\nHIARQEN7oRunDtcxeTWR5fZ4dszgsFUWa1GHv401qeMkINJM3UryVxqEpqkV\n0GHj\r\n=EnAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDGRqOEQe+6BF5lJ1R2fIEWb6oDBCrqwWbxluaIJuIcgIgfBvqYPK2Cbmo2JvmymzPW7IV8GPOd1QjkBh80Q4PKq4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.9aa1a5c5.0_1593191099243_0.6764764633315161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.d36e9861.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZqWu2aLbYp4DskuW6UdHq5VPh5h887rUMfiZO+xEQRzDdYdiXpb7PMlEopXKc7jpfoCVVFGd2EoWJcvF2KXv0w==","shasum":"44bbed45ef56ff340e2e2aad5e38c839e5a95fbc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIJCRA9TVsSAnZWagAAiFQP/0oT3SRaDJLtcFQo/LDX\nOxd7ly/2qeMPqf6Q4CgH90REfHjdpQz0XIZYy97sKGtdlLPI2MPHc40Xw83x\nbU6fXEKZ5zQ9SCOt9/CY0911pqHHML35LfEuO382lM2+qt1mxePcKyrb7Ez/\nug/suYR1eeg0U9I1PB3TpicU0+ltQ0mcPQsluk1tmMsd4ef2k5Zg7qT4Ramw\n6EnIi8woq61p+gcDqFlrLd7f9iVKbCN7ilxv2NlFguCo9aJbj7ldYdua6GRf\niH5hp3PdXuXcID/x4VG2arSdfzDxopppi/mMtzu/g8NVkT9xnGt9aTClz+6E\n2LrzyzkRJT6+UniaKmSVs9z3FEkmvzwLWciQNB/fAY/zzNYKY0ubNODjY9WY\nexfqRGhRRqpvbPQXT/wb9KJ7t+DOshWtT5wlaj9CZnMR20eWx+MbYeCaVpVa\nKp3Ffy/mSXXl7sVoLqVuGVeGTjg6eG0Y4/GyGFchMwEQZclozbTnSwsVxtKS\nGt3MEr9QSwlXD/G1XdyqaGa/IdB8KG8tS+XHzcMYrl+elRWioDL3WpY/uqi8\nxtvUXiIYtvsroA2A5GPku8vyxsVAYyEFjVZbdeprKkFblu+paMPmfpE6RAvZ\nUEvEhm9D8gNS9hYUg5YNDXi7fA4gxGPN/BXHs7nqi1OEEDXfGGyzDaN2JOUp\nkHo0\r\n=w67H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd171Nudf5eoPZDBcYgx+xIizww9fPZfssouROngydOAIhALJ1HSC/bcGYjcs/2HEqw/udTs1KwJFAr07E7d0BFqTW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.d36e9861.0_1593192968898_0.8464590428915779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.155c2f85.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-I9tW+fUDAOB+nZVbII/WMO9kcM9dR1kGGm94UDDgQBzlhouRw0AqdzfKcPTqolGqd0QnNOklYZ74sH9NqwKVgQ==","shasum":"32484bbf28a92ef7fc62e049133539ac10670432","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oS6CRA9TVsSAnZWagAAuqMP/A0+URo4FfpmUPvPAdWt\nYrE02GmZiZw3qlI+4OkrN3HDYmoHJELIc2xYrrpBRqwZiCLsTIo2kXZmQsfx\nbu3FzJ+BjgttlOj/HfBa3OKJWL/MhOmPfbm3qJ5KZS8z54hIFGJEqrbPHgvC\nJYPv4ZsRjLL4s0McjS3iLyL3KAKlsrETyczzHV9OWkTB/xWHdsXaj6L8iMIN\n62Pw1phrrW5OF12hZQI5Zx2TEuGVBD3PAbuJ1pVktbZ3BjK2dOZwndpAOfUL\nJcXyRHHISe/tF6ohXieFfPPgut0nuGu3hMsJUQECgsNl84wRux0ROrzDaT3B\n+xBEzT/O4fqOif0oYE1Y266GO/k/Gq5x/w7Umpdz/ml7lmavJZeceFNzkC+u\n1gFKtdtU/7+Jy0Wq9k6MyVktIG9b9PEodK4DxDn64owpgza+FDQz9YCUGBWz\n0bTP6AatoM7YLSK1373fS3ePnppbXS4E5+/HS44oXAO7YExF8c2U/RN/6CMk\nmrPZAYvfg8xPkDszza9YFqVTus0XLhptnriIpRGJ+Q6aLwZOBm0rwTpvDevn\nVWHuL6tz6az/llBepgHO5+bHH4Sp6LZzVxYXilSerDrkTy6PpsSR/ZZ6SHTh\npBivxBLuo59NssiDI5AGzU22UIRr1Ksp9D9/Vc2vfG7YQYk81XieeNa0jBUw\nI4VQ\r\n=QrCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzdyB5KGjhz5Yuj+ryeQRzImCZPvLrddofylYS2kz9XAiEA3eyF9VldcvRtmXZ//UKw5zM28VEz9p9PUH3RybzitZk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.155c2f85.0_1593214138231_0.39938504599154157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.340c9c40.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G8mdRIHxq9qifMjzDlDOHfcDnPY0IEtDifYQtP45Cy8YsMMMTo6zyIflQdSO85DJRqjmihDmLvN9nbdQCFfumQ==","shasum":"e9f1dffb7fb46cf5e830bfd89dcb56b5882323d5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obaCRA9TVsSAnZWagAAd0QP/jg41bZlEtay8K8kNUFY\nkevgjxTzTq8+HEarJi64I4vv9rdbepY2L4z3VDJU15O8M0ZQo7uNyuInM2qX\ni12qlNZZCjwJSRdNqacLkBbRcexp3pG5rhxUmsP45a5XzaiO283lOlyG6SEh\niZe29cTZpPto4OmZetLPI3iqEcbE9gE9RwAW2U4yvp32G3o18POejj/HvrjL\nEJgm4s9FJ5tbk7F7wPB4yUAhYWZ9YR2bGNxWvg83Kur+OHe+oxhSTv4amXf+\n7K+eV1wmLBvT5ZinpYCoBSDSI17ahs+tU/yFdo/aJD7Mrf4loEAE+SoY16Vi\nqfkUImfXZgop4REQRCUyCQRmdIfUg5lSUJnYYGZ0zc0GUjiTWINwf+5skV3o\nGoSmPOg650V2dxPt8/DT5a6aHb+/xMoByO7/ehiG4HYmMPwH5yiY8M3x5YNq\nFQAoPuMXt4Lfpb9SrV+KEQyGUi3/pe1/jvkQVaQz9pYixvLFLURVf9isDGVa\n0uVqjgrFT8+aNPHe3lYisk9hwCB03G07h7pTAg0rhdSc2Z123tWEyEhSv6z1\ni488flUwal1HQuXbe2tFLy41dJzBEKE2Tk9HawC5W0w+fGgS6pi48O49z76S\nnasA4ELzQvWiqxYb0/feTgnikFb4du/oawDlRODci7sOjllgC+Cuh6ALlIfp\nIAa5\r\n=sUqB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyUh3tg8bGLteYnOtiJ1cabsMlObrN8DGlAmLmnqyg9wIgQXNiN1CHca/7pM1qmYt01RgJmCC+3CudMR99DD2eNNg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.340c9c40.0_1593214682259_0.8409744329818076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-slider","version":"0.16.0-canary.a3384d2d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-y8ozWJ1A8J23h9CX4XDZjjitphYL1hKH/PgxEEq5Ph95AnLHxWIF31hywp3rVrqK2egGh8Yd/AF0kKGvJ5b3Eg==","shasum":"4c324ac376f4eb4796e9bf5da46e1d0c0d5c519d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fZCRA9TVsSAnZWagAAcloP/1Knynvz62y9WSsr1Chf\nmAzaSojJdSTXVW9TUBu5WmS50fg3MmzR3+O+3RzT6UD0D00/Xv7TARo5zNH6\nKBOSAzqLxWoB8orO0RD2pLvtyNUv87WSj0OWUKnjKAdsklDUJ0Gn25902X/k\n1FCrcHMb1lyxtOeNZoO3nJvlV5BTj5gYLwf9KhtWIzFpTZ1wsrn9OfpkPFci\nsHMVPR+Ce+zc90QsDm4aoYsakXJ+9qbcam5hp5dK2Rt1Tu5VLuyCKqT+T3Hp\nSyfjnbdzQ3t1mzg/LUjrdFw2gPPey4jBdUNomVhASEx/7Ayl23VsUpA0FSpC\neyQJvOzznrCoBDmFcyLORY7fp8Slvls9L9qvq5LhypNqcwz4Md4skDNtHaSG\ndowuRiKMK41Xmteiu3lCSQ1TpepisUrZ+q3a6aBaSzqYp/vIZnS7z6MYM01s\nKgisbyoBHUTt+v/oswMpe0rQHaz8bT0JKiEuuxooR984SGUNodZ7HZhw9l3d\n7jiFP0/CfWCY7FvYpnRntjRgMEXyR31+IbAZfKznWlNWq08H3fHCUm+0B2fs\n7HQoWvjO7pAJSdY5UrANZ0+6Ys+zl97Md6qOk49AdG/BM1Q24iByM+8u963K\nAksGTKwo8hpatn7Mw+WK5px6hru2SQD6yfIWqshjL3hh87KMyL+a/juNeX7F\nNM3e\r\n=kytG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4B0NreoRL3mNPD9DgUTli9TdjZss2Mol41oj8npyESQIhAJye+1Z2BrEtjfyIJeX2WPYyZe1dp/qkojT3q1NxpKKP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.0-canary.a3384d2d.0_1593550809424_0.9977349377911022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-slider","version":"0.17.0-canary.6d056c96.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YClOpSX7BK6fhDt608gQxNM7smnZ6WFDqCkJyL9N31NyLRD0cnddx0PEuR3dpyDshWo0FIfTz7w7pRUz/aPaYw==","shasum":"a2ff0cb9d99215c4bfd607093d22008a557ad3fe","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oPCRA9TVsSAnZWagAAwgsP/2NOcdbENkBwoWTNdQBr\nC30YSaYqjfXsRK54NfdYBH2AlmidcD8vqpVkgvKRcdSUNDX6XdIe/rlL2OwJ\nSAbA1dU4WFM/i9PwvDcgPWVCRD6aMS+UIzBZJw91YkfMLrYfsiksgwDTQ8dB\nq+qGmrj9Hjn1oSBP+cdhOKx/gVYgFiPyfKREsgEv2fqbEsWJmKc9RF+ZUZcI\nLjvUyCAyo/sdTh+OqBzdGG+FiHBecmn7NfRVipV728wIr3iWWW1MrEm5t5uf\n3Xr+2NCTE2tvEO+MRcKAvQjmfL53CmMEZ6ruXQrR9gLIZfS6Zf5FUu1djJ7z\nVoeEs2Ue+x+qKWiVThiL+QF/CS+7npLY9VPsVABZSGkg4CN+7dSp8U1dkKNz\nseWghbu5EmDgcZqVk43Vjl0wu+AwUt2wS6tTiaiWqtZTgrAxaX83pHfZPi1X\nedzpknlwcQz/VRSafYIOP3Ez+aShNt0Oq1ID3Eto/OY0e/kSvIdwQi37UGlG\nmuGc2d2S74ym6K7twTh+0FOks7XrqTct604tSxrHW/FFm6r4oWZctxikKL9A\nwMnK6R6Zgs34oh5A75IL4Ceq7NE7cphVtr+k8tDYl9uh0uRjRkwPlmMAcbHd\nPcB+Yc+Ss0fj+oSop36vLBl4yoaKnYE947XytLWQ8fmMPqIfbN0V8eOr1uE1\ncfIN\r\n=aDzw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPkhepOoXvViXIPQ8JtRhzpjyhLJvome15YkxslbP3zAiBCkL/6kzl4nP2/LSwM4muNcF5vvpZIIBAoNzSaVgZG/A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.17.0-canary.6d056c96.0_1593551374725_0.045983421418861914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-slider","version":"0.16.1","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"^0.16.1","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-TWAwoELSNpO5efnPmTdwPM+H9bfvtBOkb4vvbIoLDQfC6vrXW2CuQ+LEbgSNGgqUZNR7jMAWTmnId8ViiV20iA==","shasum":"02702b6976e50ec1c8730155dca16f5b342c4d20","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.16.1.tgz","fileCount":16,"unpackedSize":84486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tBCRA9TVsSAnZWagAArJ0P/iWjDkCtCNeTe+qJ0AK6\nbmsZSJ9mEmZyGcgbWslkquIW5uF8aDIlI3BSslAUklHjG4/hSBJDAf/Nhf3e\ngUJ+QFzi8MRSEGkxCXLn3kQlk6x3SCZ60ffIwExHzSQi0ZN452WMizSE63k2\nNqm0GgbSfc7zBd58qpbcjPrOGVmCRL0a315B8dvRiH637NpUnAQPeMxDmnRk\ndEG4PF9y+DW+QY3s0wnuYCp0Zj6CCUaxtw/GAUFhpO5qEN18hEd+OVgBWIjc\no061CZCXvso3v6Murygd/txZJL9PID/EngwmIXXk/zZWh7TdZ5ioAckVHSdq\n6d/6AIXrSX2bcEBn4HWHCUHOT78D4rT6NivW3i3I2P+NzWedC3B+8DGvltpx\nRNYoZ7k3AmQ/wBmSCtHPUdpP3c5gCD6S4HszyulRXqtuWvOd5Zkf8MYJhNqt\nSg+C62XUxU5inG9qBe/lN3FbOnq2HgMRNW4mh9MqWW0vleG4x2h1DynjGJJj\nGs/NQQHv6BMP6OIUph7xqzmN1WQgBxfd49bdHPwGNO5SuUL0vyjzNGh7af/q\nHNKPD6DFY6lTAfuEZyHFj1crWRvBJoADtLOlsd3WpfEQKgwfukC+b8Svof0e\ndFhYx9wm50YUsgEF6NcrQtOD3SBL6P38ne0GwRKcc067JBAQh6o8OCJ0Q5P1\njceB\r\n=xmoL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxQaNxqAFa5diftD4u4fQjkS4gFfOVTUE3DlLrFZe3NgIgSAZiNwn+e6CMZUFJty5/OJkJo4siz2m0Dpx2I2nJt1A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.16.1_1593551680844_0.9039546775063949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-slider","version":"0.17.0-canary.f7e37607.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/slider":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-80SeALP2y0rIjb16DsGC7K7PTNIcs2Unc7wDe6jVXi3A+JxfkdZdW/Phr2pZ31EuTc9YGjX3ePBVtz4C28324A==","shasum":"b6d02308dbf3df7cdd66b09fb8ee9ba5ed98a8de","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IeCRA9TVsSAnZWagAArhIP/jUSlXEcP5HaUCzGY+8/\nvaNJdj74Vj4qHPuXzl1dzEglHqW35ypLNJIDnO9Xj3fTfBpeu44SH+8mdotc\nKv/aQsqinhDDOgr1h913uq/IfFwoLBbsdvyEJZhtyz6Mws7pR+a8ZqUfNIsH\nSQ07KUe/PslWt1g5nQWCfM+dca+fYOfbOEI4TeSh6XDfUeKJ5MSmL+hRnBdN\nXx5XLyYS5q1BwiuJXqR7pybAn1OmwL2DQpgQ0Qcedyd4kPNKCI1EoOnYyDBN\njz1GrmU3jOugYSKNlyoL/aL/f7dTkOBPsFTpohU6O8p5+zsDQ12LtofUeTP2\njwbmgCt/JMo9Re7+2+u8//x7Rx+lgMC4w1h785UJmhJomqTb1JpRdJ5Q8tuz\nTwFhHOJb6sgrNr9c1s+DA9FnUr6DKar7o5H2zEYIpSgakgf1NgaQH5uaBU1f\n3UX72a1GFWd5bEbVygdlyIpnJwPsJVj1YHonGicgQclOAzDE2ynZN4wwlgHK\nlehX6pQBcPxwVPbGlpycDfkadgbuMtINOt9qrrpBg0azgg0VX/GQ8me9AQNY\nPuSoljsH+B1BZA7HL8NXCyJGloCr4ngeSs8tggW8jnvwohmRJKb5T9bCsNi4\nNZNJM2VGTQiqzIr2d91TCryjoa8QsK+L6WtqRbObq9cBDMiPN57puJDGnWBH\nYFcm\r\n=mDOJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmFe79G9IozE7n2IJUHNLNa5DZNF/ZPEDVsDjr/4dnhgIgSIyC+ZdzIcw9JJoxzuM0Z+fY9qKLOIiUbE0voTYMD6M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.17.0-canary.f7e37607.0_1593553438167_0.4673844922852668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.0afbfef2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/slider":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Il8FcmGeapOneZWcoIcKRYq/MiapqWA0CSWWrPBY8T7JNT/zABAj4wdwATnmlzwM7/w7rom3xgl7BkQumGXe/Q==","shasum":"02b4f470b24c2cb94898ef80062f10f6feac4655","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Od3CRA9TVsSAnZWagAA6XoP/3GD1dXrunceFuEogpFq\n6Z6DIn/40MmMBYV/0tBu6Crf/ObvPczpwkUbNzjx+JHldQOHzTuL8VQBA5LR\nd6stCu34QOM1WkYpf/VBoPoZn3LPBWtq+U1WtCwvS389eed/eSkOfwruUp06\n43GWbm6/I3976Yk2cfaxJ4M12rp1f296s+/wTMh3c3FBHTSFKIueE8PkUX7S\nSAEVhSGK3ylIciigmuik/PzmF1pQ4JI9pe39osovzO37/ERQ4LJ+pNIdMMdO\ndViS32qZDsXF8U7nUaFZAhgTES1/ptuIHKDteahqmWdTi3tEOxl6EMUt+ViX\nJylEpmA3HPqXVQhWIX+JxFy/u0pwQtBdhgwMKfjlhCNF20n6j9p+IlR8ghPJ\nurimRt794gC0xBDj3EwJUepkxfomOmtkIJBT5iJmg8OzJgCYsYyBP7mdUi5s\nIYw9YWRdSd//avInx7KodaMic7PWa7AIxHD4Cql88SGLJXe5a2N0sCU+I9rf\nT5zmmC+s/naSlQcJL+Wq8ooT9d27p9SpGlmR6PKEdlXOJIATl7nSZrQW0NXI\n40mWEzqX8Yyc68uNf2vPNBz9ja0mr2qQSEf7JYuTIVLTlRkeMy3jLrNVMWXb\nX9avO6gSVZegs3fVEdpt6r1bC9CBwaLjJem+hRDMGtWwDeyJfj9ldHVUEv0r\nq6Ma\r\n=fNAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD44m8FiIZxnMsLzp36mAyJmCje1NB65tVu3HBEXcuFuQIgIMnmKTcnQBXVfxfiFicj39VylBKIrJn+kQZ/Q7Q1fD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.0afbfef2.0_1593632630954_0.36323964018152344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-slider","version":"0.17.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/slider":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-S/DeuzE2XhMenZ+QGy5uqTh4VT2bqEpnYlrohnwe8Z/LMer7ZixzKiFb/ZmJhqEOj3B05i9hsa5eQru3CMzXwA==","shasum":"ba51dac19c635cb42105e1f48d48a61886bbce07","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.17.0.tgz","fileCount":16,"unpackedSize":84486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeECRA9TVsSAnZWagAA678P/27+gCHLX7aEPrGXoWH9\nSyfcloc9IDpr11vs1oIn0xCBewCXT0UhCGMNhmzjqGezHUp/6YUQAmPgY1Pb\nhYtu7D0LR28pU5mBoRybGYxrN554cDnIqVlkOAit3TbKoGlupoYr1PzfgWux\nni3kOCwCGFUFCHomgjB3clFac9NW4KW6Eg9SmwqgmgeXnU5tEL2idY5hNLK7\ntkwEgoOIGN22TWhYBkCwnLIdIqnM3Zfh37MCyom2l3eASy5JCQHkXM5rhaD9\nEome//EWub2HV/413oM1pN2YXOAIJ8evyUm7titxUJiJSyorH/dK50srMMO7\nAPqLysSxz4HSYJ7XgSYuLRFSbJfyaPhbJHCLiUBdpjxl44Vig7JJjT4HtDmL\nmoVJGqppNbAJ7fO9u8nNFwO4QcjGNevTR5qJkM+apmoy/yhlPRCPNHk5Gm9/\nvrylXrNSQCzwXTgkg4iybOe3uk/uSRrY9PooQfEujFbVDDDd+hRHz/l4Xk3W\nnNIQ2AUsOQMoVXJYzkoWMPC3zN6E6cGsYCtwa9zZDRU5dwkmhXji0d09fLVy\npje8W/Yd6jx4UYwCZA3EAgdnwqJQtxRPxuwGWJUt66ilyRVZHXxF3QX49ikF\nLc41lHAAjt+hR/XsgwBtT5/GnO6PCIPdcUv2i9bCNS1zX8bcF6trXGHpQ/hv\nhwoK\r\n=eDdJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWmxphGK3v7SM3COxzNrkBWbQRNsvtfCAJ9b2X3FsO/QIgMft7nD7hvYhnLOXJaZbLdUNodwup1mfI/2JTqaR5lcs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.17.0_1593632644509_0.20985501862523814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.fd970958.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/slider":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l8hW5eejBF5nVjEWPDy6QUap5a15jqOd09AyKFkYAVbtbAil9ilLufwOw4KPTRv0Qz8jsnqwbXa5BladqYLobA==","shasum":"612dec78d20557c69a478a25b3fc610465f61f93","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R03CRA9TVsSAnZWagAAiu8QAIEiXdH3bI35pV+8750B\nuy3KwdloMxpNkBu/f9SAeDSUmH2ZHThn8pbsQEOXkXW9XPQIundKR6Rn8KwK\n+Z4QM5Ha9+L/hUQxPqgIG4SD7rBIorWgcijJQcwdLzg4H8P4w5qTMQnnqWju\nM3GnNCfmQhVFwBg/XXFjWkzIjBD3xzu032Fj2g5NkaPCKpHDGVnylIDQSX+D\nyk2xB/EZNwmX3ezO3oRF1IG90Aqd7uw7XkwtZ7GDgXsJkumBOXKYpSU61BTS\nZT9zsfFjI6rFpl5vf6GPL6YluOiB0YbCvbCYHBOtQ8Geg2hXEOjOmyF7vxq3\nKj1Zak4MV6eaFWJKEgyWLOO5vv9fWb/IbE0YAA9F/IWsJSxNbrCSHOq3ywHm\nl5/EHOdmqah1sw9DFzkf84QdvCf0wBvhUKP1O9AGGsF4ewO3qBOTX75hEbe3\n11zCSjcz9Ibn2urpLBYPBu+jwvB/nogVoJVwidNWyLBzZBCPaMnFoLrAuLvA\n4RBV3x/xoAhAFC4kR5OTE0NCHg8pg+r2OPWUWZ+Utk9sVi0Uq1vlKGr3CXPs\nK8Pd5qCAsVM9WWskMcbVzgbHoBNImz/cgaKg5jnvIPTzxz8LIWLtxsZDli06\nTag7f3j7hvN6JfRPAZCqg8xXXgMTkxXsaEZHIHx6LOgna/1sfsvh9XO6QKg3\nEDwa\r\n=DIhc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmz9yiQ6L6ZOAONmMMAB8wE13SDIqr+mDytZHAaNXqPgIhAK2JPIGDAPXmWKJ1SdjbTsfm8gFOYN4jJUK0verIwWj1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.fd970958.0_1593646390846_0.5717016180719576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.fd44be19.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/slider":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PRqzfkmnp4WA8bz49NKHnvDa8JIYiJZh4Yblcz0re1mlNTrBy4QMIvuMfgxoqWHAKX45tz5d8NUiDp4I+nAcVg==","shasum":"a5da43a71ed21247cbc416a92ee1badcbd350c14","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUjCRA9TVsSAnZWagAARg0P/j9QmBPkyvU32Pz2+3EW\nyUQHPK11FHVRxy4pJg5efpn0+RQAuaG+M6uyrGmDQAY08FrBtBUurPEFGyEj\nFudaYQAUeQgVigbeqjbDB8GbbkXJ+D4qCx6Fy69PjtAzMfxC6Qzh0ElP/rR2\nEc6+lBm3beDt/B5ZaND+8MmbqzwLFbhuWH+zKg3Pa7arKcVSmQ6Qmnir0D2e\nQMXIWYmBuOnAy/667qhqVaQ/cRc0Tg1h2EW9V389VNBuuOIVzVpf2oVViuaH\n5sHuQaSony6fIvVnJTkjehEYj9ddSpqVoxlEiH3Xmc4AwIFOuqZDt1/gr2oH\n7pStXmORxtF52MFfYde7nA4g+WnixM3kpailn1HeFJZcWq56BW5PA1XfXfFe\nHC3XUx59z+AbNmPo0lnyRMH9rGOpGl8eJ3bN221rVwH5xI9qsqlkiDPlknFZ\ndBTmYT7cbXt3ueUnP563yAWDlpyV2r9b56Wutsq97OBU2uoThWgQpWmkGYWz\nNNO8dxOVl/AuCc7B3Je/HSoHqVsCD8tVMc9niVcAx1zsW0GIsQmBhNMbW/aa\n1aXlJCyjwKhK9U5f57oZM6nZs66LKgxqMP7BWfrHwBzhqtc9qYjQ+1gUtJeb\ndznntLKgRkgywoKP3oh1cfF+nS/EpZX2g8EnFK0lCby6bSDgapWpBODH43RO\ngz6U\r\n=lM/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCODODgpPTFyhQW0gURBuhU4WDIMoF95XArSCCsfuP6hQIgP2JxLCNT9Xjf/9WVEv99kQeCnGEfRcYTHdrSB2wCALw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.fd44be19.0_1593668899076_0.4454040405110278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-slider","version":"0.17.2","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/slider":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-UPVfPXZ9+aNMNRWEn6OS4j0fL6oYWbYA2sIundyegaRRzU+vsBcx7vRIhsp9Pu4SvJaQeagLz3YEYSboJoWFGg==","shasum":"1e4bac75010543c76587568fcb76eca8f83b2e32","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.17.2.tgz","fileCount":16,"unpackedSize":84486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAAYioP/0+sxC2JPav7duQMZcK0\nUq8N+lPjo6YznNkqSWsMR1bxj/T57AsPmhN2nUhsrOhPiNuP71mZ6V0HY4pf\nczavNLKLuQsLQE5CpnVvLUSdq23Dgt6RFLDTfDIAekyMk1AlFtJz6Wbtv3He\n+zfNSHEeR1q2eIVuaVxnoU8+no5S1+Za89a1liUFHenBjrOK65A7V4ztaBzc\n9nJLpfx4JJT+MIBcr4/k304U2dwRTvGxklogwqulKjIH+m06bi+TKfBE1lil\nKUaSrvpn4+BDZbb0fULITCtf4Tovas5dv9QLTZ89GgXGo6uyKqVkEAgMUeLO\nKkYNW5hFNDWWIoCcNXcicolHraHk4/3gcdsL01GATEVvG3pNq1ijMGOuVjEf\nKP6kCFwA4lDK1FSm6VzjtU2+7zyBmwI9u4+ulXVMUQvRf9Fb+R/7GdxqbEA+\nPsptorDqqpyZA0kkTrnTf64dmT4ONqiOtWwnvQVNDdz1Lug5i760+frmwxNY\n6yww3r2VfRiqcxTgDpWaDrN13+opif3ucHmYpOQatABwqWMms29ekPj4gogQ\nJLjBHsGlFXabEn+MzLBoA7HlaC6TswvMtQQqlia+J1N0ulZGZeJECDbMm7wO\nn//Vlc+iJ6NETJ2NIf/iwhZzapd3vFQg06RtDH4OhfUTR9cX7/BQv3geWPgP\nDVub\r\n=gJvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcLSOw8ye9BEMt5/TwQO6EB77wL5M6w4ugszbJrJFFfAIhAOeOOdiN+roHjVuybq3zvsNC/zRM+HjyxO1f7VTlv6vE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.17.2_1593669490092_0.5519309847738632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/slider":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6di8MxODEwe33Uj/7doDGuMeDg2AVxFt2zAQM0WAii63/XLFxtwLz0RtRzYyj0AiwNx0zKnrzBa1XcuS50WdjA==","shasum":"b456fe7fee94f8f289bfb2e739a19fac976e340e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeqCRA9TVsSAnZWagAAkWkP/iuYmavef8MHeDjeEJTQ\nmwRg9N48LYX7bIf3n/mk9M8SDVUXDclb34Ads90ZzuMmrtNHTdl+RnwrxvSa\nVbqC9OkSZUH/bsRG55aBbaX0fvGm9Lsz+p2On/N6d3uByO6qvNKHTLlS8f+3\n5sOBWCsu6fi8jvNfWvTpWbmo13TdgNClg2CdybLIZaeVIUoQAvhDiBqc+J5Q\n744v8yU5XYm2Jww9sw0pDaogQ+PUVt4v4R57bjlb+iavdqoEbNjlpb4VZB2m\nEKtVUB7LdUUE0kJNthV0SsQyos6fGxss+HzvF0fCeQq9nDtjTqZHW2yOWt0F\nZRxiLRRsKhpl5XsXzaxp3DW54y9LO4e9WaFdZeFK4vJMehKk3q4Gz1r5ImC7\nkmfUHl7IHiZruzi/Q39S16flOn88lEMcK60D4yF7wHFxmFSbj6KhXYMVFMzI\nJ3Ei9jw0yfm0pgeqXIuJV/dmKwRJFDk7wcvU0dgCYqvd27EghySKVvjeikZq\nK8r87X750kuz7pZGbtNpOwHK3Z2h92zIcm6hV0VXhzBYNuIt5zvT0s4uvouN\ng6fVLPjRkgBNUDR2EgGBXstpqcw1tvpgpssVPJE+/pScwD2AsKNkBzC9vFeZ\nHhxJZu+XrSzwlccjDWkpxuiI/rZuUhX5xScTKxYKQv1JkmGW24K9Fqcf1eVK\nAfcn\r\n=jCo4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxkf7RjA7pXvx3XETbVR2FhoCop3bsImh4pel35dvxygIgGdtiDJwuRpz0lsWtukBlvLK9BVcuMcsaG7Cobl7KXTM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.ca6fc6de.0_1593669545702_0.765466299906929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/slider":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-z2bddIaj8lyy4t/SNkO5PJ6bXksx6un466AeXGLRcxC14ZFfXX7YGtf+iM7OENbC/ASkXxahYjuZNk2Z9GcVvg==","shasum":"0a3591da6845a4b45d7d578a69547c10d965f7b8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGgCRA9TVsSAnZWagAAX9MP/iGh/ydBQrDbr4qvlqA9\n1gV8M90dSH+LaHuUFazQ6dCIzNWHpenEGFoDvyu0o31OS0wKa7bcGdcQWUjD\nVoWD+A1kRSm4VESpOZcqj35J8mvNR5q+Tbv0AJ7szaJVq4BOkiOiloxeXcWH\nNWSyEPewfYsKKWZL3CpVYL9oRQOo24HhgTlLfTFZ6SC0XeiXajgNlcVSYBMc\nBfHHz/w9r8a3uzErJHj2F9UTbAUpBHZ5fSd6nf3x3HHK073Y/FZr/IGiBaN3\nXaBHKGCEzOHDCqnAEuSs/57a1paeiylL+4Yjwcx3M33MelpxXZnbcpcb4ROr\nsnqNbS6wirNYG0AsLEpJ7a5xjUoco5iXJIBBVoA6+kp0KXL5V2eIJbTQsn28\nVackTOk0IwS4DSaOWvvSuegYj71yKGdeJqaeJRiqjA0Nu44oaMN67Oq1x96N\nr5lVFsV44kxeoiNVwvSecUIHFzBDCEZ7vOD+sSQxngOOOSRDkfI9kjdIVMik\nopI+BbYgAAnfKeZ2DaMr507yIh8RvBXmI4VR1kCLfzH4+oVhs05yum6yLRMY\n4lmp0cj7WutJZml3CD/Xf6PVLkaob/s863QPCGKIgP1zKFIUH+ut+8NaeYOS\nhDMUcqVHnvI5kou8K2caZ8LarLtpC+NxL25ZZlYW/oMj7N8Ee1ugeJzZJ73a\nmqwa\r\n=p5hX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA189moyKklyshtVeyX+/GCDFkC4lYNNIEIOAxTs+evwIgMBqJTEg6AaohPC2BF3lVMZjvwm8iF4LXYh96MLI9TwI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.79f1ec2a.0_1594143136134_0.4504702144296464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UWMLm950QrdcOqVXdxLAFOjOBah9p+WnytgIckky4/l1ddmGudpQ9D1CBndcKXtrw4b9GeVIQa59WWOfUjPY4g==","shasum":"19255ee0c4457d1311c99d794c825de79cbf7eb4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JxCRA9TVsSAnZWagAA+PQP/30f9bkTBdsCgqAm5YrP\nveYCdSszaCfxV28ZGZsDWpKLIDGpi8Y0CyQrpJUvOfs3HvCV7VLTb2aHn+is\nFfLDqAzZBrZOnslE3UyyVjAwAKLUhKBAu0L5KZCGQsPZ0+5c4QUDfIdHCdC+\nkDVqnZsYkPXYfUHDrPkyijCJgJicu8kQfis99JwHfQ4jy1elgOCDoCH1OJ9p\nQv69lnDbsN2/XRZZmNMqcRAC6jszS8P5Aw3s6wCRCcf2rwHZbXZupCj2smh5\nF9qXZFFc86FGkpWy5NP2helqgU06jypH9JGRAN7kA0pjfiBrlMFWgO20hdDm\nD47Ku69z6lZLTUDgnrmV38HClFZWMtPFROkKrVB3YDudJKbATgL3lCpyAf8Y\ntmHCjhW6HsZQ4a5o+NaQkY3G3fbUKac5LMwT+jVo3Wcz678ixKWFLfGRh47P\nIY9D23CNnTLLPhnH615zoCF9c05N37L/BbPJ0r3tttvhNrqtx4PFeeFYn4YX\nzLqAszxWfij5QKrjt3PXsdk8Tw1kI80nIOGQbUdbLGbVP0m+msTcAtCtkeBp\nmIlf6lzIpxsh4xj4rZgJPFIMCZanKPk1DxpEYWWwkQHvpBpxM7erFsM49S1T\nVpskmhYeVsaLINnRt1x1xoyLydoOL212pUOVuhN/hbmRa90zCrBbG69oGqwH\n6r4p\r\n=ihv9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlkSNuHaSHWiCg+xjX/uZM9COUKoNvQDb6Liv2YYwTUAiAAn6fNx0KuqkhNUwiAB76HNFdi62xEkGV63ll3QqE6Xw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.a7bc45ae.0_1594315377363_0.8358753315995724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.b184bc1c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gqjQJcyg5+a9LDqTQsi2bCCO1AXT+2lV7SPbbzwNXrUCgDX0Bs7UljGLqaKEl7iRqM4I1ltoaxNo2VKLpeS8jQ==","shasum":"74b1c47b271899d4fd1e0b41badb5f326c685535","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SaCRA9TVsSAnZWagAAO1QQAI71dnRa3zgsizKmPo5h\nfgs9ueKwZ8sIvRqJCDT+LAylh4gqoT7GzfxM/wXItHGs1W57pp+dlJerLSfJ\nBKdxWYC4wBuSrWf92qorRMrFYYmHeNucMexNJC3/oKiVaVuqs1EI8ilEt9ZR\n/BKqgjoAK7gCXTZsxQJhQJa2ef1qDHKkmXjLcmOeeommpXRT8+S3rtza9eBo\nZWl8qKSennJmZKG3PDNOKMb6ffCdr6aQp6QkRI9UGaKvU11QLyzqlxDQZRdu\nBOTjjwCaDDhACr/iDeQ36HW/+hKIUJ6GxxQuSPVC/2zEOEoYhsH2G1Ty5lN3\nUBia1g9vdqjLX3QI/gVPWdcf8HBk3/8nC0bD7ZIanD27mUAglMQXOgshTozJ\nwitScUX0djh5f616hIMdDuN6mQY7BpfVQmWn8+oiqkqJGd0rfS0cDlwEgqkb\nDKmRtN4UDtFsU4mS70hRN2pMLyUdd4ZhdxLELzavtb5wlCPetPuzZXd9/FjC\nEHgdT/UNPDWyx4TW1gEzNVkZ/iLthXLzOKswEhGZ6NWnBjkbpHta5d80TPDG\nuSeQ8KlQQnWXMHPncnfvMBIyCVja+qAlti3PgHSN4gmg4DIDaxF0q3NYkm2h\nAdAPCBm9AOZnzLCUCdKdvBOXj4bGlmlwEOVc6PZqGTDXz39cDPWYMnQCQQwG\nyVAp\r\n=lpM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJm1jQRAJBrAfuvg6IZfaBxGZC/GUjYKAoQn3qdqDHTQIgLiuKCFEqSyg3xJ1FVzlEyXmHnkznKHPcuNNNMKQLFGE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.b184bc1c.0_1594315929926_0.4097947784410103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.b39fde62.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-J2G6aQ5ZGmuJBxe3Q2sC9UjHxF+Zkq9ARToADXPqXDrnfR8MdwfyTk+ieniP3oRo7303Y2Qihw2vQ56d9JCLiQ==","shasum":"6944c38161db0dd06ab6fdd9c50c7b6eae12dc6a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XTCRA9TVsSAnZWagAAjrIP/1JaxRBpX9x8l1tIuSWd\nuqnLIS/l5jAa8Tq7PamLimxjsUa6uNt+yCw7P6YVcjrorV+nwAzLQSKkWWWv\ne3yP2phFK4aInPmNfVNnNTsKE3qpiVwElIsHYJEbnzrZ12FktaZRJH5xTgC1\nbtNTL46qron3dLkYY35xEcWmh9FHqMKgKuz/nt3B6441ASuUpdEZHHuX3kbJ\n1koOzAyWQaphSA18dYn8RZvtXvoecheZ6rLFAuzpqb7OY52KBiy5NGDexNfw\nwZkBal89AE+5iRXsFAShQUEPZy+PbFO6R/6bzCDawkJjg33NHVaDO1GcQwUw\nDLW2F52NWEkkkZwiubKRdr+7EV4Sm9PiBy7nORWJBL2S1ohzMePP3BrLZ8Fa\nL1wbaRv4zAH1l3buztE7JLBS5fmP61BYLgyAZIGiBR2DytDsN6tQEJMqVzpX\nSFUTOprZ6sOizxCjI1tykMsILXtW08n/cbBBpDUY9iPdTMxMN5cjKQy4BUtQ\nA4DS+hrtzxjVDO7veEiqxD7uVA+nT63S+doNHHmn55xHA+1Co4d6djJQgrDT\nfkmGAD9wgBKzPPB0P+fcdT/6QEYFq/oqf/ro4mL0Zash5N6R/tjkbhwwTUyt\nCFgc1Xp9WPNZa8GDYIJ8ax6juI6ltGPumjJ1M5tSbABvK5FJbjl06UBw2rLg\n/3GP\r\n=ayxh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm9KJ6R5ZM8KdB5FjaBGzpCDJRFrc8lw9kw/5FSLBwnAiEA3f/sCeTqQt8i879ElUR2n3YGJimwYmapPqs7cYjxvn4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.b39fde62.0_1594316242824_0.28558560652842346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YWb6F48cDHiTf+0oMwFwisDSf5c49RqLL2TfHegbzJejpc9CEfTzDaka5jknrNEzI/kf9qs2064Ly+N5FTbyrw==","shasum":"64a75b8b865edfbb9accdc9ca7bc8d54e7f241f5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EcCRA9TVsSAnZWagAARkYP/R8Wqg34eRjJpe0dyUfq\nsLV57/nfBMZNSI042KtAxdaM5Z4dyHVEkxYzwbaz0WjLd6lucWW4xnsV5dzI\ny29+RHV13/HLNGpD07I5Phiv9dVmd0Dq1hh32JZDPO2coIAqYMwlrm7Sp88Y\nvF4uNjeVr7YqLr2JsrZbODWpyidoLCMoyJFSx/xWO08pZNL9farBT7OXpG1H\nanq7OuClgzVTy/HwXxdj2lv4bhJd2Yww//b/LAXUJFNpojeb4f9IuotWhnJv\n1L4HgbdiFV3c7CFI2VlrH8u2LbEHKQxfby88Uib7J6SbsuO3UTOWMy/GMuHJ\nonXwC+OHI4ycVCBEfv2R4HtYNcnbfNGtMC4GUdBFepcjbohmdBXSLBLAVvlo\nyU4rPi6SJfEHeFg6mdMZRvV4ucNtdaUQYlR4/355XPktXJRruCkrtDpkbm29\nENsZGX6IUZcFNvWUc6XNUmKpTWXlIdW0fojejDM2XAq9tYL7aBiG/zKY7xuQ\ne7IRc2Pgx8M8H7dMif2S5DSstQn1u+Pv+LxmbqwGiXJ8EMnLY7NU/Fmb/TbV\n/ni8p1tCO2+TFGBzK8KHnTEexaZiccm3oQD2Bo97ovLBOJ7jQldywwe9bi34\nRm7qO4HHd/xS8nP5ER5kSc0xkEpz8Xm98Q2OFXvrnOhXtJvIHv4XzEUAvjAv\n5Sjj\r\n=pcRO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7/p6aL0YG+UVOZ9/X7tmYwghWnI05Jb+KWVO1oeKGuAiANFtL7zhj7jhcIJsnofH2rSjsCxtbK61e/bDPvmRrlKg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.dfdd8d6c.0_1594319132188_0.4032202691109086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.11cf2694.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bfwFB7QgBxF+rK0b8Mh/zCCPuJrym79srpvsfXDoqRkfyfm7oCV6/AGGOxOKAmpDIXgm5mwNUz68neALooVGfg==","shasum":"541630aa72bd5c39214a52169a0b514b82b6b3c3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FkCRA9TVsSAnZWagAAXq4P/RDuAvPOd26/GMWBTWfE\ndAOv37J//nPdwyr0B62tSqVj1Vd/FihF+cJIcb3DG9CSB5rMz5atoGPQZ9tc\nj+T+N8o7SDp/zcggIyvvYc/ja3Qa/J1CzFc8I8hNBuEISOdhXzXP6cV2e6S4\nEBcKjGE7LiyakYB2t26AIwoyeNQoXSAW5ij7dtbwJdEqQxbGpDcAniHVulyR\ne0hqiLdivDW2M6QnwUx+2AfB+TvHWeRhUxeqXfVFn5zzDiXWjSkgPsEuqpjq\ncZ/+UHGhiihg42A0DkY5e6g8oV9h8afkfgeFTPP9J2iZJE2rqeEURacMa48n\nMk8Uyymrv16D1unMSJf6zDZNLN5F1mK1XmVLX7ModM4vlau/lL3YuIUHqNhs\neLSbNi1+dAKHBOOXomT4uK6Xpht3xZU5C1jfMK2nhflUTHpWKh6KSGfUpBvA\ntZt7PBmnFIr/ia0Wu0FVbkhgNm0wVtou3JeQtDUj5L+jhijFBSiHWfLgivfS\nzEykqP6pBlaznbym/+yiqHMzS7ArJiVl2CYeVWpUG+FJ3ptEvSIf6zRg53Rr\nooMJ8gwtI/nal1Hy6vxwLw76cu7Tp7jIsXJuPQy925qP1ugZ/xgpQG8oK/gw\nhvUizSdVJEdgF9Bsvapl6AJBaROJs2webEKTPirtTOjTf4b/JXmZug5phCxd\nR2bE\r\n=ydFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8ukQurSF07uzpcakgQx5eCiwiYGZTan79FwJSz0oF9AiBT/CXrVLSZId1V9lWoBrK9GiDAeUwaPqw8L7aoUrkwTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.11cf2694.0_1594327396354_0.1166009362753011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.436d66e9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0GlwVRS2QWWP7u4TpsxdXJWn0PDf/dl1G0mTR7LYSGppTFf7volTno3z/Qj624/BNF9iAkRrh3TYJrCY3tATYQ==","shasum":"54efc05d6bad4199b66902dbf2b6fd0e7759c767","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KFCRA9TVsSAnZWagAASx0P/RlivEmLVKnTIDF7jqhX\nUpeuZI3cKVOyiacMFQNHBvdOPDw20TbRQmRygmOkGNC92V8knRRKN0WchRPS\nMWWlanxkPAxFgjc0cs4sEmsbP4gUqtE1poSgcHEUVaBoUpANf7xEMFa1uEHe\n4FKpxM7vfF/1qHBZZ01HNjvDqogmrUuFWyqNWIhm5qTswASQo6H95CrFp5zT\ndTdFRGKKGSCHED3Yl5b1CBMP4Ub7+mwT8I/NM4FfRDMQRXPdMpUrbyTa/HdK\nV6TbtBtBt13y8yX+auy0YwyEwNxddmBXwb41PDwOj6Gva06FKSVRTuysOc2H\n3FdgZpreTfbCSEkuDa7FPir1NuMGGjt59CtbSYEjv0sQXrnfTK87tNZsDl7J\nQAQPTsl3Q5Wgf4GYIJ99alNzTwpo4Nt+I+kbgd1ELHuPOQGbuwzYaTyWj0bM\noOtnMJxQXlL/NUHvEbOlEHjPhx96SO/UlDdexnc2SYHpL43pw7RFlWMyj+JQ\nkV2K0tgaThYS2YopN2bO33shWlvZNqvtgeQHyt+tdw8cW2ozfVUIjX+HlrVi\ntJJEAnILEplHOS/juHfODb5nGK6Csh+3n2m9axmXj0Yns8dfCaPSqvRkLxjo\nh4BYoXDCcX/jcyTxbze8oUKlieClU9QLzEE2/HoTeiv529PJwLa9RW8rLZlF\njuRd\r\n=dCM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzWMenNlDuySGBUXZw+J2L2onNgg1D/RFq/zZmpUpjsgIhAPNXdt9QgGYMdszZ/RcHUwXcr59Leavd10HtCggkj6ip"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.436d66e9.0_1594327684848_0.6237511879426936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.3a44d36b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/slider":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gh99BuAP074Ts5EyOjMZFMy7eU87US19sw0/RocTEXNFt3kIbd2LtdOMv6+hyrPJEpBwanlPhc7bCeXfgin91A==","shasum":"0ad960c20279612465bca2e492a49742681fe75a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7g2CRA9TVsSAnZWagAAjNsP/j+jpfMEAAXheMeCGjqZ\n2FJ/cy86jLNmpgzrnIOMEmb4YWwvz4ZXChs4VSPNe82hxS/eS5D5vfRyErb4\nYRuFk7MESCHypijB1qIMOkt/nhnhXt8j9qp+nRtwyvkc14moJoROYa6zMG2Q\nbbOibhTmcG5Z17kMj3ecrC8QhXgfsIs8ANCV+tUlh9IORzjq7GgEEFwKagr0\nGy6tzEyQpq1UjRxX4dI5scB2zkVWNINuid5cinUDXIgN4qjpYo2sDmkQiCSP\nAoSsxfmmEuzhnhGuNppznQWm25miwYJNJy9fX0nrlIl9hZ3Py39ndFxFkSWw\nfzrtB38QR2SszMVykl3qL3lPZUXpXYNHSShSTBHd75Te3NCVQe9CAwlCBiH9\nLcJZV2Va0VOmIWtlxhpPGFmkxlsuRYBPNo5q3RO3jvWtUnsNFKunlIcoXGza\nm3oYktwS/GYVX9aRruV+AcN7hIvLrSzaLnZL64yW6a9W8NOcSmpsMIUU5i3i\nLeuyrmU7sl5rY/esss3foyxEiw9MD4qMOu9qyyM/WkTcDiQjD5DuPcJkXgpm\nqxzQO0ZR3HrqND7HKNxWD2mRtn0XkhHDRIzqpMSKAutj80OTOop7SEm1a3l5\nKDnLO843nNRnBs0MTfKUuLQV1f8UoaRW357G7VTcLiAhycDHc+0vWnxYVa4t\nyoTU\r\n=FWOO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkYJm0+nsQ81biW23YjWSlMJr8Wb+P7CCbSlBHjMYP/AIgRh3m5iq3TJbO3kN0FTUm0tPkRJTdzKt9J+InN2091E4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.3a44d36b.0_1594341429703_0.2503485708293556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/slider":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8SuDGOdrT8/b+frTnX3/eWe+gKgqENfqw7kHDTzt4oYK3BtY/eCpF3OVE+1kPb3G5s8PYxo+8N5Yy9cMCOJdMA==","shasum":"b1d931fde4ce3f9830b9f0d02ace07cc6de023e4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKrrCRA9TVsSAnZWagAA4TcP/16XhAcWrkAsBMNVgfIv\nQxgXB9bVRn0JlnjIEz/0594pt6kAa2s98KlFUVTOL+5a11NLxLrgvK4TqOZQ\n8Al9Ta2uDviCIR+bW4t4oR/zO2PffjLxpzQ3Z4S4l0ai88orYrBQsPZeLCbY\nbzvzTpa5vFeYIEYnMXUMPJ5PTCilfXkRXsH3dnANjz3/ufdx01JmR/V6+XMT\nOYY7ADn8kQkixSxgequQ0vNqvAHWut5vD1Uix9KjaPEGoP0kPvZFFs5Wq+LX\nzIhN7P8a8CjvUUdLbGylCydSkGjZvfI+/Z7mr6X43axCyakulUFiilmDqFjJ\n3c0IGwuS8Srg9lbMz0RjDVecnwLboZRhzYRdwj1u2F3Tqzf8ZZnfT+S4Z109\ndKDgVc34+TBG0oKOjo5X5B0PEAv2+06/lM9eTLEIQ8eAIKMEbGgkT3N3Is7r\nkq7ICkAuSKZZvUx6eDJR7uIyxkJqLe7BSvB2NpXUKoVle4jekqFaTefofLRJ\nEfpBZLBzmnuQUwJJqMK5stMcaGqLdq31mpi3gqxtHWkXufUdQ6GJ8WAeJEMj\nHBbADEZZ1B7AhEzY3pGUxM0nCkLrC8trO+5ejOjCXrulZOAng/hVB+a6ix9t\nAEEKix+odWk5U+BAQoMmW5r7YrvlENi4r1ecVrgZbzSbFCNaMzpPK7aGiSRv\nEP2J\r\n=NVSY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3PpAz2+8ShYPKPkF74SlSFnsHpkLLrkn0+NPQBaqZLAiEAjlTjeokwOQkRRbDvqBdpPiooJmXu3kBrAK2Lu235CoI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.ec11ae6e.0_1594403563362_0.9385985441778439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.17f6cf27.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/slider":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Vqj7Gk6gfMOuGScurgDiqb5LhtL/c2GmXVJ2IvFLa0+ZNj+NgB65PQT3pD7femcD/a80Oz/763Hn1RanuHxsNg==","shasum":"188b13d89f657df47770724206b88e235f7841bf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRBCRA9TVsSAnZWagAAp00P/11LhxIxu4bgxCiTjrWD\njEDZ33B6dxgO84y3ne3jcMMOoTEq66nbyDmlVbGHQtl1GGp/2F/cz64sHhLQ\npThQLsR/HqGGrHGoOqlqISS1C9is5wSICUT/cXc70g+eeYBHqsv5H9pgfLDR\np9HbXT/cH7+/Pwi+8sE5CetVcDIRypP0Jl46wwx2Ivzp6NGDVJlnLtXUJ2NR\nqaTRWhv42NFb5DzczIrmxJ1v9ISOpbU2PGrrvIq7JJqfrOp+7EKfZO15uZb+\n8p/wVrapgutV6v2VlR4STuYwJwaqtMc6VFb7oypqCFM94DkBwp7nF0ZqR9me\ntgfRNLs6YIgYByEpPdGluac1tsCPYpjR1vMaczHQVwwAqwbTBISbNFNszK+I\nqcgddZNCVAlihvmXKg2TFfZqh2zcNdOxLEDHarMurYuOG4jZ3Ui1Qx9+Iicb\nhbqUH1gxZjwOUA6pcrJP2qrFLV+LWN6pKo+WQbs7eVUIghcwv/UWKXrsSZet\nAq48X3NZOvAKH2jGbcYSgxockVujEfyC/UPpASgRlycotqyyvciWvVJzT5I6\nU5sbH4LRvZqh2G9mL9wa7gTzT8bNDzjKzIxKLeRgiVV4hVi33yas543ynO1x\n91T6unORSM8U/gznTinVtrdF8PE0cPZ8hLqSSGAIXNNvzseO5SNXo7lWwQpv\nK8rI\r\n=+/0Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEidVvTwpmnwYVUQDRFk+3rcu9TseTIAbTY2bKgHwvG6AiB7V87PTksC9ZK2t9zmHHK02sHjx6zdPoL4I3RCcBI7Ww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.17f6cf27.0_1594405953348_0.22414758803085255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.efdfbc21.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/slider":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-H7v5MYKn88secazI0KDHgj9fiCA947YVXoP86FqSFfmt0zsRmbfZvIjC2W3zyqSYNM/CEkeYa3nfA+J+ebkR5Q==","shasum":"c9d63b7466e2c8a3c6cb3026a32645af1233c41e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcBCRA9TVsSAnZWagAAlrIP/339eDQr/HQ4qeY9jQR7\nn7iRj80RbFxELWabBD4ZJVumK7Q7iE5/5iKnXh8Zv32STzky/BCyfpGJkldV\nIF2WoF6jS0Poie720hMeH8FzzoMSWMsbHNh4efDb/8sHY4cnm8BfMb5Sk3r2\nmOgIgRO9zoVAwthQAH5y+NsYyABK0rf4zDnoMTaW6RBRitK116cV/k6THCPX\nniRY+1yf0YdR/AI9pOTlhh9TN41mg7YVup37jULUDzO2k63deO3O7BA1E6O9\nd+/JFggOk1GRPuGQca4luAxvrQDWq9AtmywxPEJ6l/ySK9pmy9MkyM2o30IL\nQ9C8RJoGaw8JemnrVeGm2uydhuN35e4nqWpLrrU5fjl+4SjNySUlzZBMCMhS\n2aJHrKAgVTqj04GVdXLqefEBHPd2M5YxGyyN6EdnpJN5ysoptH75olQlRihc\n5PSV24CktIR3f2/aOIByJvV8VjXHTRvpLgV6AIwx/0MLNekZJFSr9WosVOrK\nuZjAsPP1VEjxqcgc1WCNl6D7BswszM1JU4TeL1mApId5FMoc0paMalQrxcLG\nm5yZ4fyMkxpF+kGN4rteWwkc84Mi6IE07iOEMhxNtA81IZag4rhBxv27MMqS\nX76NHuNSKiiD58vgiOtUX/Zpm7gVemIG4p1JD5NTCudcafTaJ0iczLtyqM1d\nOmhF\r\n=bdCN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJEKfimnVFk77e9+ex1S7LPTiLKC92l2xOPXeC1ZCrmAIhAIJpFB9STHg8Egk2VDatN2JgSQSivPq5USTsYckwf4IS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.efdfbc21.0_1594406656991_0.09093773743109401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.bae4339a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/slider":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FyOdKTSbhcP5whrx2HMKvaMmcYPTOedn2WLoeDAF9zYBIIYrmYI/z+HKIqF6elaOVuX34/H+U+uuPivDiQ1bfg==","shasum":"fb806198085093d29a6b5124c0602a49e0690804","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBACRA9TVsSAnZWagAA3UUQAJzyHVlK2Vlq0hIdgU6r\nVJ9OOEPHek06Qz/BI5fogZtU3lQCprTevzPXgGdXbW//pHETSM8XDLUlcLSH\n/6xWMn28XPGDY1zCOC+JbsRnfslOjmtPU+seeWvA+gQqTOCT/aQVHgMa8Sel\n7vAFxHOWyA9EgN4GFR4G9I0OijKbrZTkLfguBUcpB+rWU25kMwMKvoDQaQZ8\nNiy+t6ziHAnzde2JevC04IXm1ygHWGwK0AaIyvd3mO6jWU7G8mzLd+OmJoxl\nHZR3sJn8m23LXlr8WWoJ4GriJyarfIiuMhFR+1nxzIGZHNpbVnHsn1qJN/Qc\nfTWrFDM4yrXSEFTZHgX4rZIyNc1yD4qiN9I2OFszuRgW5MKC4Tz1WmE4fGJs\n8LSLwbO+jzqBO3y2H2WWx6DKWnOJocuR2g5VgeWxtpAqOvK2VRsamT9wjIhj\nCy3XZVzI64GJYo8GbCSRvu9GrJdbVUI3mSXpSG6IuSvEmSKLwfOaL+DVad03\nVVc6JqQ+elJP1EErcA5UlQaX4p07ARVuAna2AQxu1b7T6AU9Fsyz0/nLoe/8\nOMgjZ8i0AU3qakmLR8hsCNVm2W3lLCQ7uFz+SgzjDGvjFifluOYePuBNym6b\nr04/G7sPECS7rH4+Va4fEnXT4vr7Qc0MuEvfg6Qd/LtdVwHRG5kn+ELsx+Kj\nqFHv\r\n=Ez8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6pbva/RQ6W4pyKTYG4RIsZhGxKSXpY9n4uQ5N0GFueAiEApmEBeowKJnyP8lFbBjFRN6OwNgRRtbdKo41glGkSmXE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.bae4339a.0_1594744896521_0.2876887385447662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.28eac13b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/slider":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RDccidWsUCvQSCngC0aj5yZGYa2WE6kNa6zTTDvbtVZmjP7tBqtENHVbYuOXA35sBzu/eCBYiqRj5wUHtUQV+w==","shasum":"b60fa01392f0af6c6295eb208d49bd2f933cd8c9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBPCRA9TVsSAnZWagAALwUQAJQk+U5d39+BiCeoGyz2\nzcGMExEIyFZEWc98IxCuoV8SkQQalBPNNZvVp7TYONkbLUWT0cBWSC1BuQ0C\n9t1b76NM9hSpN3yQtDY51AHkRxFKAPa/uCeQgO4/zJ6pkuxFDwEskyGdzNv9\n/HBF+3w9sie+cBi9GbfdT0W5gfVSklx6WT2gqMgztEdPZDJuqgEfFMPboVUH\n9MPVfE6bfceXhXIagixHDOImM//Xxra5RgEZnv1mby3DD5jGy3g0Lf4R2CKm\nXsL0dCMfriFeBieSJeaYhWWuJwB0FRHmuh8XuCa/VG3z2yUlJotcvi6qvJJx\nvrn/WN1cyllIQkO2HsL5Fekne4axBmUPMAG2+LDMHAycVYO+/4XiXYAYHFtE\nTep+CPtbyW8IzUi9LqOhPOk9mAYlD5EBqKy6q/ksXcYyhLQlgJCE7qDd1ypB\n7UOwAET7IeeshTubat+CmwufYjBHgHoD7G3TdgY0dtjPKMCto9plPN3sDSZy\nS+Rtmsq02T1oAOPWiHKXuB39ZU5JUGY6ovFXM3zUivm+RMmKEYLQY5np/fVK\n2RVTR0ASyAdWjfgBW5kkfQVwCYABsa7lLwC9X+Dm23k+Da/8Y5WSqIylrfCo\n4b1v+eN3j5sD7kEzTT1c5qqkIngJ8YGU4OfzI9Mj8be9lcX2+WCUHOyqhYnU\nZy4P\r\n=LJOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD67idvI4U+DGMs5AgHLil4wal4+XXgmYJZ35q5ozEQwwIgffbwWtr/KzMGAahApnnbvlfIlE2lZWI33NgnFeNfbds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.28eac13b.0_1594765390816_0.8289270859159343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.44966b65.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/slider":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4mT6fbKODu9oOzVeNaE6Hd9i7bCeO12i/fHnmvhVuIlNDN0iU6WrUunMW9orF9e0Dwc3vpffvwxrEHbx5IHkeg==","shasum":"974a90903007913c176e74f7926cbf12546f9c4b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0U0CRA9TVsSAnZWagAAjWIP/19VB9rI0KZSSs3PYOio\nG+pFFwB4j2p9H+XWVzOng9XLVJU1rqQ71+FJmL7XdOeSPc2SBulQHkLjgxL5\nQdE2rBKdyhjPL9wV9w9HMTHz+EsZUXq0EcS5m/Z2+JNbMDZU/oYgoN4axHwZ\nlmC3KWWrYpP/q4uyF/CG312yIzuICsVgogGsz2YOp6KaAKhmcGXYRbMOZ5zh\ndWTNcwfQ+krE4MtntJ9dFOMczgNoHC49nhzg0WbsxvYTa5/yXVKi8nRSQ25E\nQromXsgi8I1YDXa7vEcas4E1ul2tg2gwn+VAbQ1qRl0eEvcjH/L+NSI3D3/p\n+qyKxPJWjFGrdq1THJFFMM6QaqWQemtsZdrVSlbBtmWkboLSBv0KYYPY6fYw\noAhQmffX0dlI2r20QwbVd155MbpVwKeN08zwIxAsPN6W+0SC8DlVtbT5FwfQ\nq1+Ea/MK5atnos5r7kjhA0Ke1wCPQe93OJ22sOiPEXu1iaxMEgqpUlI5ZrOr\nQh57W30eFv4hGnYzNjbrcNKoUZeeQ6eH/XYkAJzJknJAsE7CIfNsQhg7qldm\nMAi4x746djm90S03yV08ZGs+dgCGjSm9LlVaWZPfoIoEsKPUgF6WVQlMnRyC\n8XI3jQkuxaHKFsK9p8LcEdLXYFVt0QsKcIQTvuhkA2gUxJiRqA6sZAG5sHon\nG20A\r\n=a4Uo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCMKEmMTLW/iAdT2kQMY1QMlHYjFvTmqjbYPXYiNO6SgIgd9sf/d5/3qF5sdQtyfjztRQwCWbvykb6B0FCVQFZPaI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.44966b65.0_1594836276474_0.8533463534557353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dLDxOCqkRGrr2YzXLtJA8Isy0Q/Q71REQ3sS6qIKSUGd/JSD3p0RZmg/RJ7e74iO5TZCwcb42bJkROoXBZ/UfQ==","shasum":"001b885335192c1f67f4cd1240c735ac99592539","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIY7CRA9TVsSAnZWagAABw0P/RqbtY2cRU+vdJY3aCvI\nhHrjYd6Oxr5L9bumnngTF+P8d69RbjPdyLNCnOljcEt38u3xNLQETxHFzkQG\nTrVRsXRRcJQ3pQgQ3SrWAH03uX5bxwVqtK7nHNS7uzl87JJNZ3jHMkTqkviC\n3lgeBOw2w2EO4jCVZaHX86NhVpFkZQiYsyvcwY/ixYTs3mCoZlggjNxyK00u\ns91nYu9n8uvKkWRCGVJusPn3Bi66gEZ45S3vvEXk95Rkqher0q7tvOMIl7Xc\nV3/b908VTSz7yw0DlEtlqPgptRBEHmp9bw9QDvuQnTHRsXBKORfqNJsvOtN2\nrSRiWyCBbQWPFRiCstpEc6gv93STsKa7m1UcJ/CJpLh9ho+ss6QHNcwt7BCA\nY8N/VsO0kHJ1G4XcV5IDAH4VcqPlAFsoLVs6kxnedvlKrroUfk61pTxDRlSb\nrZ0bar2x24BQ87atrGEtkbSZBlPhJNudYp0uMNCeJAF56dQH2Jd7f61n2M9i\nyIUNOE8Z9ROkbjVgKCDbSLXztf7TE9zIaB0F0E4aGDQQh9Kt2bCYDfXqGApU\n66iFUS2z3Mq8fAXSIsWMkDQc6t6yY9J9+ZtL67xL3GAfs+lMHLVPnNxS8m4J\ngBBe9O3vYiTsKQZMIZFLRNiC+1EK4/TSN7c02hnUtfyEyCls9uapvSb0NnY+\nZ8Da\r\n=840c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBphm5n7iaP2GI9Qqtld5BuwsHi3wmsGo9REOz1PmnysAiEAr5gk1WHHnR2/sAekursNdkhadNH2zXehn9AoJ/D5ytA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.3ef0ef60.0_1594918459517_0.1000708349859607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7V97M1vdIPRfJ8I027bgidh2XSRBxc4RIZCIrNwjQEnIyVw5BqWT5OehIiPPX1sYbgdapB3F0nBCa8gZvICPXg==","shasum":"38ea893b0bafb4a497d87d83443ff34cb17844cf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZeCRA9TVsSAnZWagAAcKwP/jmql2oD6zVufW+HwCbD\nyIV7ijejG1psiEmHJ7vTIigF5UHfoqgYZUIWrsxwhDUaW++DWwldqyRNyAjD\nGZH+mb/38X3t3vHr9eJ6Lap/XgV9veh9yY+Obza1adXXLG8gDKSKbme+QS0B\nVrqBdy1AUq+5ztblQvr/D0gzEE22KoP8x/yjoJtuoFX4j+15kRP41aTUbHx6\nRdC/MUFJOpiCKzBF9OgFjB4wtCk8sdKIAHkXlr8hi7FaEcqbhxhEAZyrz126\nbnRoYAtimZDNJ56Rj1r6SIo/IOe+AyOmjmrW+PbtORPqB3S7YJ44jLTrUWwK\nCWgqOyWasoEa+WcRAf19+mOyoCNCWGUX0KCypJzbc+tYNHi0rs8z8/fNOe0g\nsuBdXmen81tGssqkb8XmiVQjx9Nj2kTuIn6m0Z18xQkvE3+oLcIU8hjpZBv9\n9ihC6o0vSUJZ2uEl/yf5Hw5ckJHcR9cPTP2CgTbxBCsOXh4hrrUBsV2d1GC1\nyn0FAUfIDRMjBhm6r84r6XQck1te3jMv/5ZOs7esuSgX4vi2vyKLAMbIGduJ\n/5sFxak1OzDORtuGg/sKL5Jpfy3ejvRZQBklMZ5ajLghtO/2kmzqvR2OP/oq\nF+R/ZxzB6ithc3ybQcbn+sy4tbOBrbu4lPkvEciQp5d6wozshh0Ly0BXLKu7\n45+E\r\n=MliF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7P8vRVI389nlSEqIVmF5/gMBOwAe3CNqw29NUpx5q5gIhAOizFwMo9Tr7kVFCaHg/mkwPo11whojDhfzZf18y6N28"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.fcebf9e6.0_1595270750466_0.618626171023716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.b6a772df.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DPD953xP7Nm/eDtnDoLTXMuv685jBj3w+B3SCnj3V5W0vnjfeyNxoxpZN7bnC8A0upx7if/goWBLDXqhlwRBJg==","shasum":"65e92c4fb241814e76bbc57e1e96daf15d29839e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh65CRA9TVsSAnZWagAAuykP+wTJSFTQ4SwkH7e6FtmJ\nAs3SVToYXlQCwUu/QjtsAO9CHZvOb/EuYe1bFs1qYJrZwBE3mgkzSmiYB/nQ\nvmSdHPQAsaXiqOKQB77AswzZUfBog2MZiJka4pCaJBZ5sIW3eQj1UoFf0DzC\nlfceNi4RDExL5FiU/b1KIUgat4xAFF+VWVfY1yT/o/5lgiRU9ACIMQiuzySn\nKScTT/+cgCizqYl63FQvIOvNR3WysYeCgOTjlipkArIqhFHjXw0eqcr4ytYy\noD0GGnGerWg8SLjk5kQmW+wjhI04I3oS0Z8+MMLHjLXE+froO1yGs/paIgB6\nmptNvq/OzQXIk0vE5lvuHNiHrBtPxbUHLehUHcMpJhO2WgIY2u7XYFhcCItG\nzC75f155AsEHvUYfTqo/H/zq1n1TDnOdJRkMqsdyU/7JXS5UyJBKyuQOdXuX\nE1R5jiXmzZRj+Gq4KbZiUCibTPL4ZKL6oReyiedTcSC6dLXUfk/l63EabcXp\nP/FrSrnRKR5gIiapEjgNZU7y310QPaOW/NZyNtNqOXsO17qpvjDBWFi1+mPe\nj2Ftq3SWvjnzPuiWJFhUjFTq9EnbCBTBDZdqYBrL/p3zztR7R1U/zt5L1owz\n/RGw1kFx+8dyuHKvExS7zQvKLg8djXvj7MTLyUBUxrqp9kOvcX/D6z8o28sJ\noHUi\r\n=gQ17\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/1lY1hcw9q9GdKHCcPqNmGnXUqTAV6L3kCUtvQA5X8wIgURo8A5WVbk4iIYFkxOwrx5Cm7IZtLNdLvsJ8gNLCCzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.b6a772df.0_1595285176636_0.6719007146003071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dAh6AEvXQ3QBM3eM3/UAjdWfA4z5CEZDJmfO/1/OW5dI07O5rlry5Wu/cH9kfVj/OMyl0GnJohZE3woDb1uu4Q==","shasum":"ce4fceebe345ef17f1a99beaaf287998d88f8e5a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqICRA9TVsSAnZWagAAlrAP/29DvIOmwZYW7SvVWPef\nYOiNZqVrFLkAp8NNbgX2yA7RR2qBbaZY1a66qvYAXUD+PRsx0BbSf6Dhoz6x\nrPaP/r/PHS+usSgtFe0qCDKF2zrOkcbqzF95JuNDDxuUA3Aag3NW03XFDgMK\nbmCHKKSzf0nUoenf6sIaKLrHgXcQ9bc7Ff+KZkh2zj2cTYKM5ZOvROzxEOo7\nOYHpdomRvTp2i8CpxlmL7rXhBZCLIA5cmeDZyWB0lWjEo3PpTydToQnPSAUb\ngGarow0z/9NUuVBQGocRdgcrbVjzKUN5m7Xupb3nnMDVlpYFuQyuS4lT2WNh\n/o8v3sS03fcZKPAQLtE1GAnStEMww4SoUWGV78t2uKVPPyd8HpNuuq9koo1Z\n+LzTDUj7lPrl3uFnFz0tJoZoU6IHiHjFeOevo2oYlfRHgjtC5PdDJJwtd3m4\nbdi7lVkpsdNsk9G+8PvG1u7cYG/eoiqXDbeJMjwlmRH1cEWHXbH7NcrxRbjV\nEVKS0ca91M1vVlP9Baa6eM9mwg9ESfBVUG3lhUG8hNCWp4OpoA6ia3IDSDGc\nk/iWsbQntyebv+8UgAzwRidgWAUs+YaNHy9zqdSAy7rM/g/jd5alXdIbqly3\nHVjsqdIUhQ35h+/9EjEQS1I6ZboytVCs1DzH3dwmdP0LdMYLHsFC7pIp90GN\nEgbc\r\n=u0K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1qbTBx8kkcoic4J6ruVgN6QZUAtEEqtyB+MDSjqGI+AiEA0w0Gq0iri4KYfPQ6lfJ4QvLqSv7FhMLOprOfKfczs8I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.f6a6ca38.0_1595349640164_0.04243644748141473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.647dd6b7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Q/WdrG8yp59y0elLLh9cD/BQxaxgmbLpi9qUUmxRFl6G3fsKp1/9BIQpozEtydWG+ttnfRQMgbaEXpm69XFkVQ==","shasum":"de2987d37ae1c5007cddc4fb6cc26d71d5b33d06","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzcdCRA9TVsSAnZWagAAPQwP/iXd/udQ4EPytvx9Ve4I\nc9nFU7JYQumiH1Re7++/63CgnMhWlZMB04M5UUH1M7y8pMPhaGGMgGKcQ32O\nhzejUc8DCl3xtGdcqt92rm8HQMnF1OgUjemb6qef1TRPRnSz/fWg3psyvVk6\nBJZ21LlVbX5W5Im9AzPzgeh5GeO2uBiQ0ke1ugmvoJVAx/Cdp9UgTJZUmbc0\n2/j0Q8yCGCg6nmFyAzOEfba3ojgPKagIneR2qvCstvFVHc06wTI5YBjjs42y\nDqB50pJMr6/s34O3HQf6upRVhv8ahq6EHbsY1npj7dJuKdavj0AiK9+sgbWU\nHW7Qo0rOCcCZj5qp3GAphJS7bzn1gl3hgBz5zzn6zdouM+SdOjlvppTQFaf3\n30betaOaRLoN5EtDt9CVYJKFKtMX5KXbZfv8F5vhzRDPI8+XEsP+QJ38nr4Z\nzHa0oqH1+rECZiVimrjyzRZ3BOsExJ8Im/1bzuV8Gp8l4j/bRlp/IPxcWJhO\nmzmu+62DqI8NmsUBGTrlbtnllZprUlZJQh1geAk9dlftE4ZO/lMWtIsevjmF\nDLQhU2FqZM3uO+zFtDQv1bDPIPIdWmQPc4I0uY0ZSPfMtfjY9xX/7aCqaf75\nX4IYvKrUEg0vzz8wa0BENw2vQwK8mAAEdQxtMRindZLwKncrE7/V+9epsoFN\n2olj\r\n=EdYW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIUUhLbhCzJBAObWvn8MNC1z0JSAnveDarioRz/OY4HAiAvrksjZqyalAXkHpdkHW5MXaXVcSxFkkRYB4k4D/M2fg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.647dd6b7.0_1595356949709_0.20586240242478393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.3cb7406f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NTT1DpkhFy6Wqgi9Z95pPkuVGWdnt+gfnYGHK+OoKUHu2ZY8Ii9dwdDtD0iNakGgSlzSpz/MV92pEk+DuIUtUw==","shasum":"7f5c3e2818846f3157cca423c61e3297b100cf67","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwICRA9TVsSAnZWagAAmiwQAJib9mUaiah1WDPTXBj7\njU3gMFHQFOu1h0Wc2PMZz7hsUTDZA7WkDSk8eEodJjUaUZUvVt3o1+Glf8Ml\nBcOULUzfHlBGx4C8a+AU14kFJ5beQF1LgmHkVHUtVpbitd9Q0+x/h7+XHaRi\nfP7wmdeFYHCzj9jRddLUbEMJNcMRDJEaBuwI5DdpCSxVvVto+p6nOvvXtEj1\nidOf08G4F0QF3rOMyGrtjfgpUsxcdpHo71MFYDhKNS4bzXY4kBvCj+lGt7bb\nhqND6owCYUXEMzmXuL8Z4ov9cfS5MCb9kqWvu5wXoJcwkeUUwwpgOrF/R6yg\nL9uNFUzjF3U4YmtXvcHYi0jZedwTAVipkYjbuM6GRSA6AQrpa+q7zespbEao\nXM30vncjsC3I8X/Vv6VI6LmanlOwSewx7QStVzuNU9Oxq0yUx3PnOhat60uc\nCXfi5pPh00l5ZM7uLxtkThgNGOFh6mmRc2W7Ss35J2TDXlqWWESevblOuhKb\nMgi1nhBjOoXJ8uSk+UJS7+k68u840Z4TWs5q2Yt981WajxzI52YTAZzJXnpA\nXPhFFhbsmCZbVHg8hdXrK+vf9HU5qYA72I5R6+KM4t0yStnVnKb+Tn9CJyYp\nNHBuYjp0obw3EoJI4OZRSjNJCMyfAcmLogBeC/o4dTML8gvePYXz+4utZQ5e\n6UR3\r\n=KG+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpDnWHyxANvtbjwGSL2XAeZ9GN5ovD3Htn9iN34wKJoAiEAzaYeRamJKM4EU/jagp4jwnFr0ZNXp+P77LJD7pDPYfw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.3cb7406f.0_1595444232322_0.860932075724343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.5717a5a1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DHLkqYjVKi1x5QFBeHgjrG/thbzTWfssq/bLq7ilMAgZvrxbxVYNvl4vpnBTvG+QRnVl6zHQTGsoLVRaopp4rQ==","shasum":"51b77bde164db202c916be6c2c102000fa89de91","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIfCRA9TVsSAnZWagAAsZsP/AqW65vJIBRVT2eaFOW/\ntLBJq61R98Wzc7j1i4KER3cFVEtCxp4bV2PTrka7NJj/hvOyiMW4ZC9LDQPt\nFBofHEKW9L0zhSSvY3oJOT2zXoxy/ubQxcmE+j0oc0RCWQtFggLkLl87SDoQ\njdfWBJ04hb2sIyxjXa1EBRY+a9MjwFK34FL8qWpH/qc2bsoYUoWN35ppSwOR\nMdY8i4OeVdkAKnW/NxWd1lhFTG+UEIjkXXg2SoYhhMKZbWxj15EMgyJMvcGI\nMAE34LCEvH058tvGvOeXZYyj+cYdpnAekOFDX7L9NenveXsiiqHM+lVXb+/v\nJaYDr2gnoGgfP/LXPqaEGryaUM3eIMuLGMYdfL6WWQudrWVhotsEDHWViDS7\nFHuTcoeMoUmSe9AM7Uj5gr6Uu15Wiz23BqRgM115cNjJ7L2wpPWi9mR5cuKx\nXrzZxNh8wAvAOTy66GWE4zMLoyM/S4U4tBG/KH5QfwIttOxEPqdZSRESv2Z8\nGYWZzb5uJ3RK5idwCmrduIAh20dzEMp7pznPPrWMTKv8hP7ul2JqhUQoy8V5\nfdlhcB2cHEyT6SWJsyfxQ0ozy+n4KBpma5uU4kHVJbmBkvjlTXS0QORJA5g7\nPllE29vqGdGy3lbY4s4cFVidjFWCQTJB9Qt0ZFwJB7Gb4ioYeW7xsAGxHD6K\n+HjU\r\n=e5Yf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzDV+Vy6QOpdPY91d1lSo+yK3Owxs3is8ZIX3knlPrzAiAIwG2WByyXyPS/xJjQOOGcuH+FPmhlMbvFGuSgLEcsFg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.5717a5a1.0_1595453983620_0.7641601723745466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UpJMLLGn/pqjAJUcFRBvA0Z746KApcKpzJl1JZ4yN0xTFYU2FQ5pyjowG+X1MYgaWR4gY6qLI3NgGlkRSUByUA==","shasum":"551b04287e7ade491c4c5e241261b8dd22213a8c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKUCRA9TVsSAnZWagAAxQ4P/icis6zP68tGnHER7lew\nBm8arAe9G3pMVGv0gQ/kOiRMt2p7PktNOMrb/oE04oy2AZtnWp41O45DSCej\n+iSDjyKSmG/2iBtpFnnXbib8OEj+WgirpKwfNOsxYmCrMRuMyLQTVVp+UFT9\nQ2tQvyF5CafgFDsIgqKq8A61OAUVhR9VGzXvEVce34HjIV1791LND8yJl9z2\nZuGsH/qm9koPiM6+YJkntSDHfPpMVIOpVfMAKyKV0bnIsy0Ba92BSqIPorFt\nd7VysDY/mvNleTaZFH8H8aMaLdb28EL+8oV1/7yaqb4NT1k8IE4z6XKtZSyX\nc6Mae/IMQflO6PKlmsxrW0KGHhC0jc4kDDO/1qk6sqI/+ntBg8UXqGFadF7k\nhvV7ofa7stn1L+XwWN2SmRJfVdMeMEztRSbQrwYxmOW23IfgwkTYGF9mjXb4\nfywV7uPWKb6q8SaMBDtb+CD0UDYoZ0B5Fmc1BQ+iBV+f4dqELyqBPXMx+esK\n1BrEgFkUzH7pwsxhvqkGN3fN/tcUKAg/zvO27qfUf2KzMJgZqngzd2V1ZJbf\noaSZhAhLZ9hmvhDdclBF8hHsErDEhZPHS6+K5juQ7YHSO2W+ygGOPpfioRhn\njBRW/AZAi5lR6el1YYseeMdyBs9VkfiLPRnJEpSHRq8m6mCZN/Zvt7JQ/FG6\ngQrx\r\n=J4qe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECozFTmx8B5YF+v/FwMKO84FaSPEniig3JsR9lOSG9yAiEAmAsPbJ9j9H8AaRZ+2THRwS/RAoV/RC8GI+sAHAyPTUQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.d84cd4b2.0_1595454099661_0.40554101718650326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.f279e7fc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IRlGV0CTk1oD+zmqoU+Tm5xb4a0t5JO+5GN/oFyVjKNT+XOWXYXwX4OUp0SIC/gK3j2bNyaU2NVUTajriHkWRA==","shasum":"31812efc1a295be00de332e4c6c9c090ca106ec3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLb8CRA9TVsSAnZWagAAPcAP/j+u1vkdF4kj8BFFTIRW\nIm96QUizMkRBia96Qx/emMIsxe6jL8XoouIiip4rAuzlu1yDMT0rfC5FhF3B\n7US/QmQvM0X0ZuUHHN5ZBBbFLCKIQx0hIZFpmwP9zJrY3zB2HFFsHRTu6mjC\n73gW6VkZVbalkhZMsqsYRzHG4fkOb44Za0QJbJ/Te36YWgGhYvmDkvGsCX2X\nwNZRwVXWScnroQIVbKtyCvLbvmgDxRlI2td8ifWoHxBl4287vC573iqnsTCc\ng310VFTBSgJAYEIN0MDya/NULAKilriiNWHiD6Yg+6dz0L3RrodeGwnJz4Xm\n8rs109+iyWdTjvivbnxFhSbTT+wQgFV+31A2jHjK089wuzgOKnZ12u6jOOpY\nZwqAKFAkwqdTXsBfyzSfg0whFX2h6iFb6JerLCimirmmSfKz24BQ4+bLAp15\nAyLMdVVKkaS1doJEInt8v5gNP4VWY/xMSoUj+PRj9zvLCQV2uBZiJDX8oNAB\nKyaGTS9k1EJbB/EpZjd5pMhexyr3l+6jirzd/aFOW5o8zz4Llw45svWRGAyF\n1AXSOn0EQnmmX5lcglY2fYYkshI0O8WUU4NJ9JlRIwlWtrkMJXBt2loHofwy\nh2nshEFr0/wwgCml85lyaHBoRtoDmi31wXZdMpw/BxOLQvwVo/DdKZGZFWQT\no0eT\r\n=aDdo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4SaNHRHRnX5EcAnuEOo8I6z4v6JaQjRcCzNC+rVdSrAiEAjxMuNIDIRgSuzcuIL9VjMLxzw/p4jeLtf8rbS9dqBVo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.f279e7fc.0_1595455227906_0.5426339809284664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.f181e3bc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NOWCqKi2YxSt+f02EG8LpAdRghGfnM41ySlctLJAd6cIkUz9f4yO9LNh4YmK6pKkgqA2gJcHFvZ38eCERo37uw==","shasum":"f58c42661d2a3d4a524356b3cc3bc2a0fc025de9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLd0CRA9TVsSAnZWagAA/nMP/3jtjB9t44yqk7AY6R3s\njjHR5+XwgUfxtRh0xKoRRAyQjqY9ggHO/F957VSmY2s92xblsKXNMn4Uc5lg\ndysxUbRrkTt/tn+RQhz7zzgQAxtDwjxQvp1e4T+wAM6GRTHPRv40/tebzSzQ\nldY/Gb2MMiuiYjErtBohTbmkWc9ns8aJhD2S2/vco4oMTtGkUh+Fz3CVrR6R\n5ESe4uk0FgRL3VEcY3qv3zD8k6cqHRszlldulyFjzHJkMTJXW61PZpb9Rawn\nhQp7g/WRj7jDZ2/rePq8dkBItKNjON9sXwFa1ioMIFHGfI6ro0JmCn1yopU0\npP/4KCxQVW10CjhL8j6sM+kCTpZq7CwWZ9c8vi7o7ujiNs4Hxlc68ce17zFY\n63kio5X58a9wEMnkFPR4BPGI4mxSrd3vylJDXY6MiQvBAEoM7PdOGPNsM8gz\n9DKxwMZPgUCLZQ5LYTraMw2ICDBEIzQL9t/c5TjEgkP8c+qDrTYlJXgtSzph\nb7RR0xjapBq3yFYwL0JCPn1d6lQHykDujmJeqC89mIrVVOwAwR2Q5q+do89p\nKfHZiPmIIooCDbjpnx6H/nTJ9ca/aNIgEw8Uy5cZGGt0/EmKIdrPtcNw72xs\nbXpzQHEquKExZbe54LOCZSw6+NrWshRDnNTdmAi7g9ke66pZChYxyPDNOhek\nv74k\r\n=ZPnh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUtSgavBh9NhS7gHMeoSuhWuCx2EkTjLMme2Kc53JzMgIgJsGcQSCABcIZDNSa5s+xpDNKk/aFCQyM2vcxy+Mv0Jc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.f181e3bc.0_1595455347640_0.9552003923093271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.346a622a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-A9Jl8dGptAevz+JcxG8iKAiCzPdLtASopOO5AWFyZ2P/U08LN5su6urMgHE7Cssk517z23lgz1hr65H34EIXIw==","shasum":"92e54427b03756e7031f9539c6728f42403542b7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5ACRA9TVsSAnZWagAAXaUP/RXXuL308XdS9JFvaAio\nf8Szs5yn0+sIfsjtCsfpLFlaw0V4U1zdFxnIvClB0qnBYupP41NNmXJj4/vr\nk2XUJM4nbtyQlB21GDXo3p+mhpz2cwp62rUr2dufD8VeKkISS/iKNC9jpy9B\nbhQWDbGMBJoZkjkeQGpSanf4knXuACLD51rzO3Mue9b7hc+pXGf3T2n7mC2M\n+BjCL0vGG1gLM9ym39xBXaApE2xZy+TLCPp0hnN2CdFZu23XmkUUk8vUVg6/\nNxgANmcAc6YAUxzA02m/7wsX6V7spJvzen6x6g215GRZe1BgDgXT9aTUK+Sc\nWurrlsNfuNU6bH0XioKLm1dlr6u2X//ewDddXkdGe42wA0i/tGYOfiIhNpUD\n8/N8DwfVMVPrrT1q7GeI2RDLB/hGF9h7yZdiuHQfaHCkFRkP4sVy3MbJHzo6\nG8+nvyCmMRXPXvZIglegbvNXqA0+mrCN8FIdyX9si/pCMf3cPlbvzk3hp5G/\nB/9SolbTt+6cFt87NpoXTTwQQqVRKbRMvHLuVLzzjlriNOiycO/q6t3N89xv\nZCKXd0GLs5sy9HWhCsbboZ09W+oqOUSphH4OlbxW2QV54hxRk9QTjPs7LG4w\nD92+iHhiB6H3VIQGK1kQamR47XUEmwKj4MQFJfhlXBvoi7ImLn08txMMnun6\nMmEt\r\n=zC9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChQX5StniwmgiUvfVbwFoYz1RkE7bzsCQd3O9N8Nn1FAIhAIU4Yj34GhLYestxkkIkC3FOgwa1ybbkROqC1FgGbGFB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.346a622a.0_1595461183967_0.617331147988146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.c9e8a848.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LeR+r/e9pUv2ssRIywxRsLuYaQ8eUACOIv0Nuh8fQyMgu6umIY05Lzt5hS1SS+hYPq+sT5hMNrR7Di6b1DYuDA==","shasum":"a5bba3ca7f7deed77f94e22a685c784a53e2498a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONwCRA9TVsSAnZWagAATD4P/0mvoHsrK4QH9lbTcxHQ\nvSE/w5/6K3wA3W6PRj9yJrJ4jvIzq/JaucbDg//etON4xWb1QgdWsJxydYm3\npwxRT3R1N6deEPeIoD7RRYTH+EW0r4gC3iHTIhAqXvUBtBNEyqTr4r/IgErh\ngFJRkTsgTnEIM54wWnWrALt9ZvMxTV8EAwurxlbt7bnxm6FspojekBIy82rv\nlnGeAuKLPSidmeS4YILVhQVxO++cVdLF3gF6GeUxfw3ENGF7UJR+oFnMx9w8\n4cDNNU/tF+wgY632arTwPtf+VivQxNmYmlT7FQzPKJB18r7g5jBIkR4lod/k\nPtzDfYPLLVxNem598mFUROmCCQhmL0SXcwUkcNT6P1XNDbWtl7qsk+X8OQDp\nxdVNmVWMN35Uq6Mj0jz0anFkYp/QBpwC6WcMk95VQ86BJR1nW07iVgTQxM73\nICoGJJTrOUyBo+rzWBsj6h1Wwxcl1aw4BKE5pkLXQ2lEib4GwiRiUSBKDk9p\nWab6HzJuOOgEp39IOToac3aDGZDgjKzgCHg+JFatLBIccR7DrZBhHA+aMuz8\nop4tGKDcOVr9WPI81L/zAzNfOjHvgTxrkljEi4YkP9gMiKCQbzlm10yjQNnU\ncZb2I6xbU1EFEP+5LMSvYyECdfNvKYILDQhR2By+hQcZwm6NVx6+HeDTmr7O\nAEoF\r\n=FweC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlzFMuElR2r/Xxh/SkkdxKiBAqP3pWEFYp3mMhEcG+NAiAof173DytRZjbOPRCW4bQhxy29bFJWYlt5Z6IkYXmFbA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.c9e8a848.0_1595466608225_0.08145975773662939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.718c385c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tnPtavk7V7DSG8K+LWQF931MSJefocwRDQ/ZujRZUPLlyuLTpOYsPhphhAsWnsxaHA6OxzNQ1TpXoM1ms4Ofbg==","shasum":"96ea60e86a030138eafae592144899356ed71030","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2xCRA9TVsSAnZWagAA5lwP/3H8Kf9IGdw4xcstGGjx\nAtmqn8vgRr8s3LfTM6Yiq/EUU2aDnRq9TJYS9dAqZTqg7I+wV+fFJYmvdZkK\niAmZywo5dMf+YYFPpYksaEyai4X4kHOjbx9vm8uuCTKBtQPWMYG19PrNDk2o\n7Ac34+IaRe7j/UNXuna3PIWFKyIUkGEcKLS7GzUC5j3s2YdqZFO9/mdExTds\nwFhx+1zx67Wx3gs276P/xsxvWn+/d++C1C27RUp4zo+CeJdZNkmXdB/ZkWUX\nEOib34vVvWYGWmdHNSF3KxEbf6eXJcR/5jCs2xFgytTnYjc+vaUsUCTzbr25\ng9KgVi9N1vGYg/91IzXnqFiS1Xp5O568+unBeaDpb5PENiNMl8YDaTdcCY7n\nH1Td/Rfvp1TqC8xa1ahDdRpVnMilx5BLfVh3bs02SvoU7K/peyKqkIUSjvna\nwo6zJmkW2kJevFv01mqwCrYdXczQzftPLSgP0ReghAJv16FRNqtX/HRNfLvI\nckh+mWPg025LZhVmkJjLfeo/q3p0PisFNocxWN3X68Z+vfiF8zgGKuMO/MiE\nEHrHujr3O6/yKsOAXbnZQCxvFv9CX3EjQ3Dy4Q8G5Qe5X4sG9+rQgWp8p+4L\naaO1PYU8Fxg6rdku2UEP3so2UZBvfg+MxJdhQrs2exgAdPjSruYdABmdYyAz\nw5Af\r\n=Vsjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQTioLeGUW6TJpFAHYMJk7AaEp4FF5rgtsisc5vq+5FgIgU2BGbZuFZeE8bJ5Lbh1Vlw0WwsQVVjSfNUGkbhT5/50="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.718c385c.0_1595534768957_0.6142030552143523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.cd516a27.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DHu8C0hyBWdLwpY37ipw//Aic87PZjiPWIfQ2cCnxFhzBlgiT2o370yLNWYH6kc/UV1rjDvHW/din9CCrrDMGw==","shasum":"87be4707f06a2be8e65328ef8a5bd7919ae2b5fb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIrCRA9TVsSAnZWagAAJsAP/j8lVKJeBUieEuBZjvxS\nih1/nO6sUPVFVpbHBIuAorR1cIT1NlN1SJPZAGpeK0CgScTRQztlungTKVfI\nQCzUw7AjUBxNVTbvcpT8vkyFs5Na0MeIcM7FF1bGgm4/ySccBXZlqTEJXqAP\nTCiKUVYR/gH6EgyvaSQ1/V5U7u/dsBaOSjpgCMYv2/l3W/xXFDMjrmmcK+Pm\nEy2tyt8RPNQq8dZ/Jrd699zNKDQ47K7ynNfhHthbw5fa/bhlyBRjRmbaSGl2\n2IpqbRVOrS1klvrAn5kIxnftbcKhK/DfCWyL40Zxef5mwHBU1re8d+hrO+Pe\nBs64yuIrBVcYC9a5o6+BaIC3z2FC1AhcJWpjpGFuY9jaHlt1s/I6z02RobWL\nwbdCQ2ajTfXZZUFs2scbZr7sGScuURenandvxu4ZwYapbasOasMWcMvhkGUu\nBDHzol6dE+boK02++KP4mMdIggxLJAjxdhsx8Sf96XRRdd68kcOwSywIhMbR\nId+lrhh1hg6C29fJ8hv2AZLrB3AAYFevU5h7PHzCOeUKCKg/Hz1HLoWyUurT\nIORRURN68Gr6in0dmyfyZT0fbjYbJgo+Jl2UwLcrKZKnh8jzFdOZA66imdB7\n+gD66efUW+kIrOqkgzrvCyre7r5Z44i5N1KbVtUYda+tISBC4Ja/iUfJ2gEF\nNSeJ\r\n=yCgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICd+YkwkZuoL72SZyk75m7O8dHLJA1508pXHXFyyRbzJAiBmsROJt6aof+mjlcmlXWwg2tqESp63LlDzcAB9pxuHWQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.cd516a27.0_1595617835379_0.8255666894747298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.1f082191.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nvZ7WkqWgK5mKuafhHpaAyhI/PhndkGg6pqdGKBLGmN0ET43ixDKdZ+D1G5dLT9rKX1hE9Es7+/huj/Ikne1mw==","shasum":"f9229d61505d827f57ab186b09b843cdc4cf78f1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNqCRA9TVsSAnZWagAA3vIP/1y8Z40ktrKigjvUjeZ1\na3LJjAq7CxwAy1vdMuC1oQezeZOT26oGGPntQGelkQauhtR7hX1j0rkSFK8k\nd5scWP1+EMCS7776CBLH/8w9cKibY2mhPoq7WnHPxpDW2fbGyrNd/XxoJp3m\nvrdS5pyBAWpb6cDS00KwfTBqeGu2RvMHt4vXsnIwnk02Aom0/L2YrQyFPn6b\nSFogQYL7doWujqN9ynVqtJPxvpvFkpInOlpDSLIbz+rglxbH4FQccHcPeyTk\nOCzdpjGKmI2z1OwcoaaznQfLCX64vEGigtaoVCRQ78Pb662MA/nT1ysqkaO0\ne+7u9E8b28LeiVvPJSbxHyhYZYotCW6SieBHO9iie9ieip3QFjz4jyrLAcx4\n1F+/Ug/kMOcDcvFRE9E5TiZEXJ/oclPubr+dGSKoEhw3ncRM3NxCGkjbTMhA\nfRxuTVqLY3LeYldzV83v9u54OWcXba2x23RNlro7I8dl4tbQO/iNUE51DINf\numDjn02Xgud5Xdv2kCPtBiWOehbTpZkpAL6fyg3u3rKbrgnAY1mXbm78KqWh\nw9lSwz2xFuI8S1IAaQjwsEjNJFJBJVkEfSJrKFOILA+w7FfZwOyXmiiQbCkt\n2HiVbmUXWcx6/nWgz1WR1qsUGdOODdCHzaItuSONjJjgyW8wFnHMagtrzgv0\n4TqY\r\n=4luu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXX0RgVoEl4tiOKQCEkBqgaDsQTFfEoR/ghbrd28IduAiArZkGPvG6Uid4kL7cbAz52opLdNYHAohDWg7k1z+urcQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.1f082191.0_1595618153893_0.8990032503296186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-e1Rs9fTz4jGyN1FyoK4zi6IEMkdJwsXtRWwzCwVJwoei9ZFHOwFT2riVNQuTlTZCafd8XqHGy0IYfZeI0u3Kuw==","shasum":"ca3588e88fef705410cb03bb4097cc003eab8973","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSjCRA9TVsSAnZWagAAnFsP/A0X1NzM0K6ClqtI6Kh9\nKaT9X+NF5NnyTL0tNn2S0Qt/X88arGZP1y4WNDOx9rnoALmpeHsCpVGjtNGm\nnSU6vnikUscyfZMowKG0KcK7SRWghHCJDsphLaErGlKCsUbmNFCOx/5a+pNi\nW+FchwuKuOBvJ4Z92RW+VTRw1GUpFXl6gfudJy4DPzBGPfbo8dDehlBn+lSM\n/xd59nJ4e8aEMDkULpwYfG4T6ht89Dr9xFLl/vE4CdIvIkWuPpjEHrNN9919\nfxxb3YV2ExRcUnHB2qecQ3+62ztielY1VZRqIbB+9LKAZEWQaTXrovALJHQr\nd6UxOOayZxODC2ycU/cIf/A2wpcQQOdi14+G2JyiNev2RFG3qcFYwPclCLOc\nNN+InafxlCyPn0zQYUzCKhLYqiqgJd1mMUsRFVML7WilDpOdtD1fOEBPso/T\nhxxrC4oeZmHPGyJDHgxh0vcUjEm33gikB+Y00Dfyh9Hw18IMi6414P6HssI4\nYyVPHEXGSFT5zShqGT5YJ5tqs43UXtoA3gQ09POHKDKK7kDMZXi+djzegHtR\nYOvpHpECKUTuZkvySsyss+8rraeGyR3WssNiIV8mmXyvLPToEZKV0NpHYzGc\n96oyE2qZchwgR80WH2u71EpkrWmx+jv2XvyYxp1Gw+nofrsqW+pJbUgqs3Bx\ncReU\r\n=bqLD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBluemJ1bu/VBycSloAUaFbJ787Ns/wobH2dgNPdvRyeAiEAsCGCfUcUHXW0TfQMEqM4SDk47mNWEXrWzJAaYjtet60="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.ea3e82dc.0_1595618467561_0.897532615200195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.94987b64.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dIbn1LbC19qpejSRMeMAojiyMDxaO5Ocarn7GTb+nEHlKBmwdPEldxvovWx/ovOFWF8qdHViqwC4c1X4HPu/Kw==","shasum":"a0ede72a673e42d1d58acf1a74f89698d9c5b469","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PqCRA9TVsSAnZWagAAuxMP/0eR5wzuIJHC52X1FPaY\nFf2LHIw4NJRyQ2MIvaDF+VkTVPYGpiTdMctNqLolHKP5LU475dXtRG6KMk55\ntm/KfCeoy8JNSrO74dumnQ+n8fGzWPmIUmBC0MYa7Y6QA4PrIVnmjz9hIf1K\n5gRPedRSwSXxy/U8pnUxNtU7C9+/djG9KiPUX06z6maeb+GJPjN6UDLAN4bz\nobdMME7pv7pbPAwT1KdAMGgmKiEVUionpmqyfakaNZzoQwHxaPenWLSBaqfr\n7AEQAxK2MA0z1e++fxsLfj9UWcYr2F/UFtEaY5uFCFlr2X8UA3VCkHPPW+2/\nzUW4lkhgaSbFpPdKLMOMl822K9vzPGA8CtFucLyIhIgf9f/Ec24HbL7drkdX\nUG0HgVMA7Ve+XMsPSTnITbWgKUMD54iaJvaWg20UlFt4OXjvhETDxQa/+qco\nSKXBjtljfsfV1r1hn+lqT/2W0drx8VjRmlkcYRUw0bZSLfnFcmrHLWgFxqHK\nYJbn94FwU4m4WrN3RhkMS1meC9Jbc+S5LDijFF6rsOC8ld2nTuan4dx+deJ7\n9J+M3rnYqYglmtyyiUP+C5QBc3l1PUl9l95zRYIuGrCb8jePqPZQ5fjxD+Kz\ng6/Ls79pSxI4Y+28NqLDnEyDqi8z1AxtLh6FRy7sDyYJfVaPdeLifzUwHljD\nrKxs\r\n=mqmE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOEpis5oRNxFKbb7sXNDiv9hNa3S8uB3VX38JdzI0E2AiAxUTEBTj/8LfdHjGET2/Pv9PPa+I7/+KgBl+EbAYtR5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.94987b64.0_1595622377668_0.812557399880671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NKDzZMXwEtYSOC3nOLd82GgANHldQkzOYPSoHOSYnxj7mIfjyfonDVDOhjb5YJmnA9cHlz6Sq4GlPIw8vvgVEg==","shasum":"73e3b0cbe60b14022c02c3688775f7a79e5681b0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVDCRA9TVsSAnZWagAA1s8P/09J/0NHL3f5La1h7lZk\nRdRbCuROXXOZXB5MQqCmuBem2SBXSbb/h1zsl+EO8pE7lVlagJuxXBurwTVu\nsZWIIdY6qSXvYbdMjLZyXBTO+xIoDFgw89vKN0ShbXK/C0fniblrZcDeQB7A\nFIX61PYNGsVbeDdGwS6fot1ia4X06/akFgcTtWOyoAJU1k1FKYvHjC4wDCjS\nJLb16uqYFQxUV3I6LdpJURNEewcUFi2FM1EQq2/zOL1j9G6T07RXLJCKgsVR\nSkeqQ6i4Ixb6w9We+lCeCUvuSWdKhiU26rZmwdBzihnRoACIJVhyndeUp8HP\nBL4uSh0RcNcEvWKYtP9DUt7iKmnaTP4uEYh75Nm0QR+g/LMlZIrSUuHLT0VZ\nE/jqgs6ALDkp8oyS2fhjgiDEiijOhCOKzml86XkHffI6j917tz/0cpm1Vd1Q\nJycHBdYnoygP8ZQSOBK5MtyWfO6DdBimtKjVVnMicpdhRgmKjGNvoX+QEaC/\nnqcx5vvF+7PsAyRYiNIoapk8dyx0IakvZowtCB4UQ5Rx0BKKUBA455zGkOpp\nMRSVcOfCZFrpf2RvUrU2/EWqzQRooh1CCjefcG+vzHMJ9oqx2mHKmjAZt0Vy\no0EVu5Gn0YssucJIQZnfOOlGYOFWyWIi0DltgfECMaANx7J+8icbzPfPolxu\nTPvj\r\n=p67w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9Ot9ewT6vlSkksYbCd0hJPfEkEYexdnqXoIbOlt3y+AiEAyLUUY2Ms3+jHOccyngbXfOt9ULn3voNC+dZeGGAWOf0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.ff49b7e2.0_1595876674847_0.057371135350159363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.3d334ccc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OwqcDW+WDOxtNeX1IHe0aCMsLAtQ83yi1N16/kAK1N4eEeW45qTHcNr4+i3/pG27GP57yLTPOZjDV+/im9iYWw==","shasum":"853ce21c6c74a2f1ec490f62fba850164bcdd422","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE79CRA9TVsSAnZWagAAjWsP/0NEeEBtaQv/ECeY0bn0\n89LRrP1wBsqqa/2ZLKqE8YEee5lBe6Z2qLgDzr7Z7pa7FeuQCblF9OmulKUo\nTrhbFcHoHVE1o1WDKyDQwH6dmo0n5rM51FKrVm5jewopy+Eb7TPNATt+4RZx\nqALJ07OmAWa1xg1JdFFfbIxdgo+fO/tQkEorPUYQAS5yqxthHnZMY+TfIoPw\nzAMOSS+/L5qRT5gdZOh5FCF1LAHkfpwqI/xlR5NLYxz/TlAk53rqKYYbDp4V\n7fTwOBBMOIhEw+UCeh/VJn/Vutm+Qosphqp+nVPxvnxuc5bj6egvuxdB2l9l\nsasMWS60IkYXZ11oK2bByv96KMcB1IIPU9f23L97TxHXxRLs1sHyErdF1IuU\n3q0jD1ISRQNoC+ugEv78w1Nf7rMLDiQzoW00JBBMsUV5iei3qCzFRjzsS6jM\nSU+FvRsSgWWjkXNf/GSqQ3avUqTwb6ClRaSezz5KIBAiadgumycSKBoDeyd7\nITLEe9N5Oq6Bx6Tx3XsAePLwSsqfaxEk8jK3EjTtl/R6W0E+XOEtqFlTMMg7\n/f5mQYD/GmJisH3v9RqDTLtJOwPju4/TYwnuWkYx2LAhZ2r2Cq4Huep05COI\nxDUtOdvWETPQoKKTvnFJclyWh0OSkTxwCyAqIcMsVLLNddw7kHkz5A7yvvjY\nSbTp\r\n=i61+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD18nNHH5o8D9jDTzIBngS2iSXjuA0k5HpLoK3Qxhg2BAIgIu69jlCb0BWpjgfbgGTn1ivaPIzUfKI35kz4WfLK/dI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.3d334ccc.0_1595952892733_0.6240661846574633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.82ac569e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ak8uenO44HeDXI3wdP0Od6VfuQtvE7iOeYWKJ5GqYG+KXhdRuc33zwBKaxv9SYloBpuc8txaTgeDRQWrDf//yw==","shasum":"0e87557f3aca02c6d48cc2f922f08c370c5f62be","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGDCRA9TVsSAnZWagAAiesQAIigxC2Iv2JQH5WPpHai\nXYNe9QutLhlEmllxUqsbYHAqjhupwMXmtxGpJLIX85Dxu/cq1psMVTBUQa0y\nfUABEXgKJUNi63C6nzdEasmpz1xTQLefaDIbvnV3SPlYUdVE6ACSOjtf2gNA\nhjVFfaeK0ePxIL205r59FhaLMXL7h8WF0d7b02i0AccAQc4q58FPwajT2JfI\nYomrfLFQ0Ur9xG1VziNHk97AQ5dPt33DWIkMJS+vk5iELiC0SSI/qxkoJCvu\n5FEZS5sRSM12Y2jeLCbXPr5/iAFsK7/EYiH/RBzWbK1GYzhozpH4jS8d+wcW\nTWFt6WfULFl5sCd/HztzV+DMEvBBShe5nBMKiK5VFNVCUDcNETLWvVXyPUrk\nfvdZQr0y1DIViNlYgDP5eBK6bbynw/dEype217UqZhKOT0IeCPhGeofEG0oB\nhHPOcHjnjl1eyz1wpNEAxh9XASTtAtt76uh9wSTcwf/Vcd9DxfX0iro39Qcm\nMyZTMpDlcr4lYAfTPvbDyEpxaOAhlpgbQgI4/4RHyVwQ4k+azDE7EzDdS+Ws\nuOaT2WdHFWyUMs8wRQ2p+Xsh7G/Rj6jrV3j7u+CncEEAHII30iNwfOvk8Y5+\naczEhnT+OfV/YAWCtr+Gkpwah9M3OvlP/Jo2sl/Xv1f0IYt1h08lgPhwXVQF\nlf+R\r\n=h96K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcFap64ookl9GSDg6NINQa/sY8UCUktyQwJwIeat+slgIgfDi0r9HENWSptjW48DuvO/AN0eVcdN23yM6ygRx9VDE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.82ac569e.0_1595961730880_0.3494589430256416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.99df7397.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nD30fYWvu3q1A2wp012qZjZVIt+MyOMFFSg9yhUnCnlMpMAXAKgTRNBlKMT9RbevgzRYJ8caw9qzKkoZRbKvoQ==","shasum":"e568f36fa06ae2a26a1ddff502e1b2c3ce22e00d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGPCRA9TVsSAnZWagAAwfQP/jaU320vvwkJBWLf5kVB\nfs2JflTJW3P8dbN4bacW9F4CFiYFzzVVVgC4zkKHfUZYkyi2Bi9BIP234XQ2\nLrlOsncaCKgC/SI+otLZGCfD7aUnnCccPQ/c21ki6mKUL31OtBeYt9LOuOpl\nFJVuLAHr1kFLypbt9Ky03TuPktVT1zn+wStOdjDvxqH8Jlv3DLPUbUuxsOVg\njVJuVYeeCxOiQ/poC9JTnhc8yjbRFohJOsOb/sM1mir6LF2o3yjL9z9/D00J\nb+v0QXBcJTZXf5hK2DnZvEI4GnL5flgwgsiRdJV72zDZCvUxj9lhl1v/4jJc\nTIbQ6rnchZ1mVMCXhIv57aSrI16uKhT3G9myFulVDufIC6v+43ziyucOb0d3\ns3VtWAzyAEkvrk8TCc9KBZ98e81vVf0N4iyWqarNXpT3mLohmV/Z1FzQ26W7\niR32zuSAOmwsk2mS+WTV9BxyCi2sCIH81vu0d8RaqChsxM50Xt1y29Od86dz\neFJxqzzF+bORqt5oFq/Y9aynmozHIv/7CmhdNqcXTHr84MHh7fUxAwSzk2pq\nCQzZHFBpuzMegIaOPmSR0iePoWbZXD9Msclon7SeiuMMisbXtaJVJ+cEwFqh\nku/IQvXdS8E2teyrDqBgNYjLch1j0AGrfHfo/CczBnf4Za51UewiYTv7cG+b\ny9ir\r\n=HVXN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLBthemloBkP4cMUZzxtYsllLOT3pMdHYaujZ1wWnC7AiEA2gm5NGaGrEyME2UWApAYaFi3B5eLscmERXlL8K++K+o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.99df7397.0_1595990415065_0.20387105136942596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.45493e05.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-A+fe+XhVJBkrchKg8ckM3MWm+rtCM9owqKV4FK5oPWqg7Z7D9sNkmD+qvJMCM/BcsDPiREiQtQhe39Bb0Tg81w==","shasum":"f440e2e5c409d121aa594ce9aabe5c17f79df542","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7lCRA9TVsSAnZWagAAIoIP/inGTROXLHPKaTbgLQdD\nRTAwxWoWbOYwYWYT8/b0iUPHgNSBJq6uVYbAqG3OhVyWMTAKHyXPNEU6IepU\nz6DwuIjijdNtpJ+BN+zkeT46qMGT8KoxM99jsMw1HuN3kYAYzSK9fNeV6rCf\nFfq0UgQLZXdkKdqUuqWAAXeOBZXxEfuLjWKuBiktrCsLsmZjZUQCpsAlqO2X\nEx8lemnHrWl4lZS8A1z0mGUvecG34wMJUSzB1AmerdVriGuuPTJj0sq3Za12\nGi+wxO+u4W35i81IjuQJha1ebhNwqA0t544WEXE+b3ZALdyDE/BIynSjjXzg\nCEhQtev2YjPvUdXHxM3zLPCILvuL+2PdCssKve5q4m7MYQmyf5AjW3QRjrJZ\nmdyimpAtpH/n7HiYHELf96LDvLX9e4NEU5vCGXXx2utD3+VZPOsXuCnSQ4Mw\n4tNxhkrObk4icoKC4CSQyoZL5vDxbgkl27YiWktvZCOzZ3pRe+PyPFvr8CZ3\nfPHFxeklbDTVg5wYXcL4TZy15LmCN82BWErFtA6ikpOBJ/pgXLjmu58Sjjst\nWgjhzQClzlV7iBo2LdhmwdcJnLkOTu80/Px44SrCGv4oAm3HPjCoFIqVhJdo\n4QVMpJmwcTLsP+8DWUsSbu+RBt2kOgdP5V/n5WU5SArVYdSEDrhcC+25nNYF\nrlwi\r\n=pB7q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjJc9gfqYKOl/xQi0quCPfiYRKGbEkhWfXq4+4a6py7AiEAvZdiLb12ztKFM4MgnrI91WA4WKnY36pcCz/ZAfCX/Xg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.45493e05.0_1596042981176_0.6908796961859618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sUF3KFQ+zQ9jdYRH7T27VXoJB5MAncMN6tN1JvB0d52H7ok8KMXoAFrCF8xAemzAYqaZ212WBWb455D8NhklsA==","shasum":"bcde8cdc13589dc2a14f193d66fb07d7e4c93e0d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbADCRA9TVsSAnZWagAARcwP/1zahwMd7nV3eYJIdQ19\nfr2OO+d2pzgZQTg/edpUvZT80Z/CpMTEl2zW7QzRDGPdwpcw98QNOPZ36M5Y\nVcpK60ZkYhQ2OFYfeCDSFrmKRXQ57+VLQ+8S/HArIm8mO9ZdCegc91VW9Qvo\nyvSBiXQCJJzT47odcDdbEula16PfAWpzaVkE+4DYD9HHylt6NLTYWQjIh9Ci\nPYMZxDvlHsi7h9hXyDf3KR/UeWBUg5k89zz8oUhg61S5chZyE9LsjR5Ph3+P\nR43O2QH3qFpxnqvN5n2WPKwE6Fn5jD00ZloLBmLSJhbgW3v26htzmRaIUGT6\n4flD8gP+xgoUcZPzGiY3rgHasOTpwVm8+GRdeXyvdOdK/nuJxM5Q+VULpm1Z\nF4d52+u+QRawesChJUpUv96uvEHa2PUQzxG/LwXNy3e4MiceqsCqPE+lh0Sd\nulm4w/czlkK7xV+gvtz+LqG6fhhhSH9+USXskPCH4SDQQtTvONzDkOK/VE5d\nhArjIEVHgmLtxXPQk29pyx4VxAkDfFaJRwPpSuqJRul0R3qOdcX69w9G2Ucq\nViYRlfzjlm1t7ODmLOSoMgOYaPSU6bepnQ9PVTWzDSWAe8Vn633pEyYif9uJ\nyoR8HFmaXCBHnUdgRj3lstVD+l7TAVzhm6Z9aMIU1MxpntzOw03oHbXYO2d5\naPvv\r\n=1xWO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+eJqoB67V5k9BsqpyCXtXgbYpigc2zo3JZlVHCoC25AiEA9KaBv/lZNdEKqfSHBOPtfxuhAvqlST/SIH/AWPnV54c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.f2ab0a95.0_1596043267170_0.5173245060353582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.45f9eddc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/no4KMh+hn17bEvB4A6yjyAYZZ8aGE6w/Ti+qyCxscAC9F26DLFM81qHDQUSW79AoZw2a9ZIQZZbtKjoYKpjbg==","shasum":"de9df0fb2a6327591c42290a08ea2da63af8e334","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpRCRA9TVsSAnZWagAAoUgQAKMQ4JeL1pmJjr3c1h5j\nxLZ76oALMOQdLAzwTfU9NQpivZZ7dJfl5VBvOcoNhEmo+2v8MIapH440Z2MJ\nyq5pD43mQsuVEdbOQRKP1e8hhZJgTY6mC4ueEhkLF51bPc6SSqe4hdC4tvy6\nYs8fr8XJjK22uI8y6v4W3YuEXoqJ033zq7ZoVc8UGsoR5Z8KNpoATPKB2O/m\nj1eQhoMjR9VUjQ338XhkS4ye+gZ7T1RQPOYWof/dG3wSVAIjUimRKaaLmKsB\nUtun14HDQ1QHUNxq26FWVq+b7MZ7Gpmde0R9WF7qWrFyypYfcTi1M16myV00\n8vDtKqZ5rKD3IQs/hjP7NNLqFox53nY/V9gbbsqku9xF7/c6kEEVRz7FlAlD\nHTX29xhRDl7/GAoFWhx5x3txCwUaFpWq4oLRdfhviwdwrSZY4kh4Be/fWJNG\nAa1OVUNCpn90Z+/91Ux6nnpYWdritS7Zwdre4zk/eqbdQLRBtxUpD2CRRaAu\n27KHgHVBf6wPTB8D8sqGpjqynw2e0IA2u5LUr9Mq0YmORPgWHNTl3ltiZ7rx\nU6GdgRC53L0AKCKSpLyPHS/A0a7YHzbfhERZQRannyHWYqmbzQMI1ptRhNdm\nbe2R3HA3kP/7lajewWfPTtsvdJxFokb68QO0O+82V8l6ezNLVi6qIH0r4JBK\nz8Ju\r\n=yR9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFPVzvfvEulXZBfVLsflFEGym+WvlNcESJ+lS+B+fWZAiARfS53nvc/i1R01HW8rbdXBGeuy5Q40OqHl/PS06rnBg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.45f9eddc.0_1596070480534_0.8971521190151939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.b64663ea.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SSh8y2idimbfH8u0A0sR6jPeSnsA2Pb5yeFFSeOg7m8eB9jmzPToHcR1rJ3pdZXr5x4fCFwJGFJyv9/uONLBdQ==","shasum":"ffd3315d75a1dda40af84a8219f2622adef1b6b8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaoCRA9TVsSAnZWagAAVaoQAIDH6AMQ9EDVjybZLqgK\nGxMeeWmh40DJG45V5gFyvBO/W1Ne4tvhmaGco0jAUn/8iUxnPQpp2jURucjq\nrCLoerysIQ8q4PGtGgrkbZj2Czf4VT+t0iPtIHT6A4gmuN7U7sLxDXHgjI9c\nHdGomz69DR6Y6ZceUo5l/wqzKrG5/Zl0msVYXVMgIZcKpwhhH64zPfXnsgF+\nvzYf/BdocQ9ETve3AHP+OKtglapXdYizqmWgay2rDB0hKg35NqaldljQ1RsB\nOlym9GbpO7W3j7rgrw8365FNKFSumgR8LgD3VR3DhZWFjZaBU5SvvFYw1+aN\nh4JA703f+ImuwcU3T8lOAUIBp9HA+ww1PSELEW176jCjFegfC17b1yo9OED7\nylB+v4XFiKaAM6QZVLo/qcFf/ipwrN1IU/QWN4yCPzo84n5yErOfZoMuTNQ1\nF5G8VUybLlTYpqHDeUfbPucuciJuXrCIVoMCkWmKpFheFSDIRC7slZ58oW06\n7mnE3gPQwGrcJOzOFCJxazTTXjnr7fiGP9MmTrNCetXPMvR0IH4VIfMe/ooF\nGm44UpTrdiWpawzIICy/RyMuhwSyw26CK3JbF+XyKdNeXo8N1xJvkCw4ziKB\naGFTS3qejEX54wLyrsUs3vsoW6MI+fnt413Jf1bYr9OWIhS4wmDsZ0R7SEKh\n86Z5\r\n=jzzS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU0pWT4cEHSNxkryfuQeGZfAJb5imiZk+zYD+/Nh4Z+gIhAONuRxYQV5ybBIPWSo+lrd0Bbm3h1F6erECeAceJkI7i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.b64663ea.0_1596130984205_0.6439377135155642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5ZN95MlXU/lG5mIkyYGzeZQQiUNp+9hMSZ0K02RTseF/XzBK0Io57dEU8Ws3/y1BwNIQ9NtYFjAC9FD+6Xhq9g==","shasum":"cd9163d8468ed3b5986fd0ee321a1f17a93c7917","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzW8CRA9TVsSAnZWagAAivkP/innqHAN7z4tIAF21Tmd\nVbLu+pBaQBv6iIi4hFDjJEs/mRsFzmHEGltc+Oc8/mnU/58L0gduYc36usJ2\nWGzh0oESH1CERNFTHb/COJxu4uEguhhYkM2OI/w9Jl/ubc551fCq8NRp7enH\nK6JxlpbN0xORl5EsevYU3/nmNIllwxqnTZYx6CTThe/i+WmTtm41Kt+2EDoD\nHw+Z7jPH3hygrqkJAByWUKV5tH84eMj3uD57VxAwBy5YqDtHYtkfpEQqY4la\nCFyuBbRpJEii2fY3fMtD+7wNlMBRCQ3Q49V1RzmLcd0aiFlZtWXFNunVNtA2\nIFE2+hN4DS0zl0U14fy8JI9co++c05Yh2y8NUOMjba8v/EltYgXQOzH+fLA4\ntc4RRqoknderdNiR8dFW8sRG5kPWphSOMmn1SmNHfKcJnwBSvRjU7Q7Yg6DY\n1CynaE+dGHl1AE3pDTCakFaWfDf1ZMrut/S/1yCBtLqAj3Ok6W3pPlRLCvT2\nYyGFEHQjM/+aFVLLwm2sWOUnEKScmfyfOfsDQc4QS1zDTwrWRV2hmhBre1RF\ney8UvFKNhJdGICigeeRmC+tWbnznltLmWHU+KkqLLrhktsg01o6S7sP3YbY9\nY/JTD53YUbqU5lbUdQEq3TD1xf2DT9qeMotC4UiP3oclbLICQ8FHDu8kVjAa\nIRCa\r\n=TLLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6vFqUqBM51FqMa5K2TfdCaQQ+1GxM/tJRkuszguMg4QIgRkmH41cB6gFfml6NSL92pQZkkpStY+0Kb8YbWOXYRSM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.9a1a4d2d.0_1596143035677_0.08430613678193866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.887c2848.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Zj4nWw4VcVUGiVdj0zIfg7R2l1+tBksZuFE7BFzEAsSKhRO6UQSpm+gU/QJAe8tCAIOzlLOX9HKaQ+B1JQl2CQ==","shasum":"ccef674ead8a2b52dafd5de9691c3c3e49ea63c9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QjCRA9TVsSAnZWagAABfMP/3rMGP5TOqtpKGvQaepY\nL21+LHHxj3LSelOnTuYSW69+Q8XreEeI23QBYVDq8TsqCPMUvR2VeOcHhHtx\nCMICpfMnuuE84Jmqaa/G609EjpxnMjcgQ/FcdXFVq1p8X3oQZOrV7MnMZ0N4\nEPta9aRfPHs0TdRD2mTR6liphE+oFFXFvH07KKW2REKMFxBvf6ZI3vxsV0t5\nhS8EFUnxP6ItqByKbjRqW6ylUU12PerP28UARVq/d2pqx3OWzEhfUQy9YH8M\n9BJvHy5T1QPhxXnZas++bMwYfT7uxqkCHirrliK1HIuE+kkS10hzzDGD3fR0\nfOL9PbEqCghHRdv4hhED25KwqDCoPPBkTr5/B+6Y6cCFBqlCJ8ZR5h00Bokj\ntVWJQN8+q3EaRa2AMEcgKY5S+xtjLPWpyZEtIhwn9ICLxoAMpbjYwE9u4sVw\nNIfk1WYVC9WHbepxYfvtcAosCWLvhN7ndLw4k4R+54G5ySosZdJbZUWmD+J+\nf5xfdfw5SM2c4IVIn0SH4Kp+7ONTWLU+6zCtcMO6CPWjYSG6WHix8YWKaZ+d\n0AzXkA/J7Fk7YxvSXjMT4Is+bhx2DrrCRrL5Z78RuQrOXVlRAbOTOH9MgPbN\n6L/5EhSyae/kNtI71FJPg+vC3oh9ZUs2xXyxsh7huq37PncqkHKi5xqF04B6\nTF6c\r\n=a2Dx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALqm+Wp/8LY6MsQagX3VFA1F6Y+pwd6djW5RnYR0eowAiB2WUZjCeWM08WIr3YNVzrzoFRuWZnd8WoBUuru8jWTdw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.887c2848.0_1596146722591_0.4410599256101442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.354eb695.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6EArgzet/Y9ygsdgUUyi6Qde5M89HlgFLjb4qDWbRRZeh3owBhEZe3sPjU40h5B74NbeSdqAHC2pMnEzhIRmRQ==","shasum":"50358758692fbb0136e0db8900f75b1b35822f6f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15xCRA9TVsSAnZWagAAa0sP/1emtA4ae4J4pZMRO8Hd\nT/F0PtaeGRNr8tuICoVfqBo8iXVivNniIGgai05lKRPm5LmMuVGxyqviyCPQ\nZJXccbV3p75iHc4H8Uc4q6WGWGfsyPbufBM9in1OnHe+lP2s+IJEBh13g4rI\nVuWCYys+v0Aje6xy/c16jQYw6f6aXVlNOwS6w/99SJ/p8kcai+U3P74c97Z+\n6dTo2SnwuZZaKijhjuaYZgjuvugmi1rPCUNKiUDBfdYtrLB5dhwNQEkdcDWE\nNvgZrpKobl+qBQwL7Smhdf5Cf797ov/kkRRg0V6tPIR2D4wKXBEAuc027Mk4\nA8GlA3fWDFn35fzSKSqs6F6LTBOPuSTpu5X2PhhuVkoDsB//lnyB+6E3kfIc\nPYnznwJfQxTl1ED0zcbsHsuP2pAJTz0izyurLG4ibjXMTo9URYxcGbzs9Ke0\nAo0svSUrlFp4Wc8PiXgFfkqIm9dmBP4my13Li3vnmzv429Lcy/gqxugUfttM\ngRgrCmgyM/5+dOa9HWe/4ERvma8uQlWmV8DcU5hFQPREMP635fgE6ILk/hCy\nn6MBFDDm6kvDGAHbWhXsLOpm3Rk31Dk/mVaxoihib7SQJWNXRt06I7Z5Hkc/\nJHMYM3sobzz5YY3olU6UO4EhYjh/NXfb8vFFAT8IkRevdc6Podeyo98c8KJa\n1A1q\r\n=th0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDryMP8XlmAuL+qAygamTdz8SQCAcc0NtPLaM//Sxk/EwIgN65lyFZw2taR0m4Ll5JWy4f85SPb3BQD6Dy2d6y9mjw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.354eb695.0_1596153457289_0.6415865018917744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.7beb236c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dz0FGYFWJtIIEBSwMASywkAooCqHRPm4SV2/h74pbhK1EpJ4rRo7LCWFCKXR0uEYeFbvSYzzLEAMdX+2xB815Q==","shasum":"eb70f8583dc62f021545b00aa8447a6b3c85eb57","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeDCRA9TVsSAnZWagAAWOgQAJ+lBHW/GKAk4KIewzc4\nosn/l4vGpcVxcRgnY3jzH4GDINNTnRhjHT5MjINFx0gfKAdHc/RSkz6ds3un\n4wfZGQc55sXB/eHMpGZTztPaMa0VssmZQLsnzFLYgSVGDFw8Yn25alMBZMlU\nLppyiS/W/4/PcUjuS+pmv8xDiq96kgShSt75RzcyACrIutCtoeuOrId30bOs\n7wz4/ocsCDpZdwxoZ34ruOqkhD0G+pyfv7IL4ZbUW12zV8dT22MZURL7fYgD\nGINLlAbQrE469nHf6DrH0MJY460O4Ahd2oj22CFbuCvkHni9cCNUvMa3NEf5\ngLg2b+inSuTgpJG0FsCxN7lmWDOlRMa0pX+OX29iR1YUntLKVm/hEqn2QyUM\nAcKL4tvlNn7zCLS35GSktWwOJAqqldlCwBsX+ADoTOyX61h+cFmrDBKByVNr\nc07Ks9HIu7m2o17hj6KDDvStm8wsDfF333m+G3xq2XkDXOmpGf2J4MlytKcn\nTuFNlAnh/ZP5heZbW8A/PCDV1ldYganbxnw9ugpZElAbUF2TvucppPrbwjgx\nnlwh810fqSOfM6e2PNa/v7tADJO4jwVqTgKV023KKv0mJJhYn1OxVtJ/6+dX\nfTCb6YPtWwHqAKU53SUankvzdVKXnMngELkEz+UvMqhVTsOSbNmcSaEFMCIG\n7tgI\r\n=GbUF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4ZH8XmjwlQJLS+TX5ADv9AOVmXs/JQ0DWfHShorg8CAiAyJMLg9RqlENTrZ9s4YflA+R2yHLIk9fhBLQPw4KjLhg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.7beb236c.0_1596217218914_0.4510389551203704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.c44acc0c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-M91My70tb/LQfXHzqyeTU4mmkCKjnqwPh+CuxlH3T8GbFcwdXVKVrsXRJZ7u+z6brnMOQtUunnhS1oT7h5myAQ==","shasum":"4da17ff03ca8dd451f3dc8bf0d1e0ca29ff06314","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjZCRA9TVsSAnZWagAAnZMQAJvjZa1oLql60sPvmDuh\nXoYP+/M2v9jBjbZW80B6GBc19D3ZB9barCK1LdOcio9MvAEeJ3bX3d0NAJ6O\nlT+5OX8Hifcxo6xrkx/f2eilAJ0I7/oGU3/9dIZxYm4oSLs/VyV6Z7YsIm4Y\nJLQ9ahIA7aK1zRbSlZk3Ne2bb4f2tDwYZTExbxrA/EZDQyIJ/OA/xswVLrVq\nju1t6jQOGoT+TiWHbUp/144wxNFi2gQOdiVDLvQmnAgS8RoM9Bbl8H/Oi3py\nYbRE7JmSYN0DgnIEvcFm5GAk9MUCRvR4K6y3TxSMZVn/GRLyX+Tgd6ayZGr8\nXrVc72YDECuGk++TEtVGM7SIfNSG4XNZLDiyx82VZ1oopx68sN0hdlVvQhfG\nFL16u41v4rR3bkyHY325xdi9X9Mpr42MKc/zdP4VvYBOHQf2ydcjzqug6xJK\nr5omI1wGwD+3FqlGYU/gJgPBHPUhM1RIAP8xx45a+d+XIWfnALFfPOCYinit\n0swVJXR5YexA/tKQJsF538XR71NYe4VF8EZ/x4wX6G0IHHH+g4o2/CbAAJhT\nxcw49OWPDy4nQoPwVR9p+7tEQh6poiDMr7mWCQUzuVdJ5WiB5nRGSDj/oEuu\njTg4t69LJaGHC5Y5JfTFjZY35szr1bcZlyb4aIe4ncajxE6OCUnchoeYLao9\nkejU\r\n=TySC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvFUUf8Slv8lV/G5jWBFq8uHAgwhPfr+F75/1P5CWBwgIhAKTNFDENZ8So75hWDRW9Yb+yqZ8T/71v+PHt2fX/TbRx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.c44acc0c.0_1596229849022_0.005728665090810603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.779853ff.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ayq46bu8/AeYqc3GCyp7mV+tziGmLqNwC2DxytDwOjRLg58X2AS3xqldlWoF01ZkJEav8RdTUjvEf2SK7doFiA==","shasum":"c5e0c0e069d690fd5d585cb2b983d7a6b49b8d21","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEf0CRA9TVsSAnZWagAApjoP/R4UrfSrsgnO5clBjOE/\nKSTwnVVAadwa4EmViHdlLiCgFmAUwZDqc3I81/uI+2NdZBUXcwwnIxwAD394\nofOtPsqm6ZIXFGgCDEaw7hmdb7dKGYov77xe88XsAtOE03ZdGUPPoCeL2egl\nup+YKe32pcNcGwjvdmk4K2aCNqY3WLASp2d3IMIv+p53kqxf/3HWlJoMMdcc\nJuiC6JbojLdrySyp0L8YKyUdmC3d7asYhxoArbnH6pF+awutKRDmBNF63Tbb\n52e7iEJPLX41WAHkIRvQgoTro1rVUI92rkcymqJGaJWr9ku/3TKh4vcVypgE\nw119SD/9c1rg82P22DfYlzeNJHzpFeul1P0cI1B0PoFbUSPUOenQ0FSGkKSE\nyNADaXQ65Gs/eEuKmao3qZ1JvljTS/SMRqHntANRUCzN8pUq/K+Yfzj+aHxq\nFCdL4sWrh4K6tok6wxCuru3J0dWsU/4GrgPCgB0iL4KEv2LtDC7F4yXCE0Fg\nVC8e1siW1XMFizOL1tIjSVtKCpREFzLbizRy+nUjtf/7evF8/NU+eF+9dyz+\nZROeEEj0lVGqiTTTdyMonA2Uf6zl9eOvE+fm3vBW/GaBw78ZIOb9d/+AlWZ9\nDu0uf3XfuyopEPsQwgHr8FL109M8fA0Pnacmpirz/LlorlUpRN4cb2v+hQjZ\n2ntd\r\n=vTeh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqu3pZacYgtpksYcYMmZ0php88ea1BL1fdCcHPH75GiQIhAK6Q3RV9bBnbo5PtPy2PMmJxF2IwskPvj7V1/ytXVYov"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.779853ff.0_1596475379968_0.07439571147128499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.8aaf270b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Gp7CFR5UmO3FqszxuWizJsZOC890/xsSi6gUEWg4oTP4KEneLmTEOlFXBEzrjLdsPnIoSSvN41+qrXmnuHSZYg==","shasum":"080e875ca9c3d9371636e858a0025a89bb4818ff","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFodCRA9TVsSAnZWagAAv6wP/RwwA77aRgme7y9n8Ul6\nPVahPIsctjoUdXzjtehIvBwlH8Z1Y6cU7q/UUP5jNq9wLGILw5A++qgsL7Ct\nlZ8WA/s9c/1ODMqlXgyxWeIWIIYrTzXD3jI5/rY/sQyj14zhis9LTEqDniKX\nOMyjwtxQ8P4ZCzVJkj51EepxzB7etFQRwacBvqXNaaUvkwkg06StIYcAZaPn\n8qOqFYPBiMXeBfXZ2scDhUtW5vxRWjpZ/F015YM/xFahhyUoBMxDl/d0tJCZ\nhULtHwD+fcSvO2cy3Fzgneh3s5yGWkqyY7MgDIOiKtScOJGE1toSEpXApTQG\n40d3UCVTso9ugUAgKza1Ob41mrgId/YWmQXOE32Z4UvK09ufk+xHlwG3Z96h\nrQAGLTNK1tgoCnV4JBdj6aqjPYHDzDGuV1CWGgqwww4UhvjVsyg/oo43+bcV\nRzyH1n54ZlF7X2okRFJnumIKa/O1ATVCgUP9mSsS5qTgx4UxmZpk8OsMVDal\ntX+GAbX4JGj+zI57XAGffB+iYhmFCdTdftJmxTvJeNm0KUPquNSRh2szX6GJ\nXKwLC87Qj02Aih8WooansYQGFqLjeatJI0sB50wtSnWnvlk2o9KHaZ803dtQ\n7hDIEiD2ObJ3VRqUYkscGGK7cTWlgOpLJimcw2m3/g9xwtozASFlWWuqNCCj\nUHXS\r\n=09Pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOfhuJeTYqv6EfQ/wKSHVbzkag25IbalViwpDc25KZiAiEA5pAFvEtY8kjgzwOf2UqUqoBpdwF9vmzy6vnAIaZXFJo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.8aaf270b.0_1596480029372_0.7493459516991168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.5cde9f12.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6W0K1aj/IotVMuVDumr2fLjPAty/aILjVmnAlVvtE6EdF7xRvWBDM25EuI77xzmaS2CbDM6d2xige1+SjEoiXA==","shasum":"c1249c485ae789ab420886ba84583823915d2427","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7hCRA9TVsSAnZWagAA3b8P/ijcr58/UOEW0tar8PHf\nyzNxp9ngfx8tqbrwEQ9+CtRVPHwVmvuklAAQbVFRUXVa5qWI+QLcKeuRJg+J\nkUtQ6P9xvYsMDt2LZikdEqMZWO1H4GwTN+KvE62766kvzdPAHAiq4VnwSjFp\n1ByX08tzwkv0hUbR+DE2rTLxdIWrhQXlLKqRWBiQM3D+uPLY+bBy+4QvV+pw\nRT9pXvz/RhNN0VMPVmlb9bM3BBxrEYuYEF1ehYXAk4KiqXHfberpcRxKYB5q\nNAeByJE7sTcWkukqPFsfGAAvwVxDIihVFsJeXaE54OImOdTOWFJ133XPHqbV\nXzk+AuLIHUmbkzIu3z+cBzbotAtLB35Xeel0tTOtW7sIot4rhvtEAgQYzhQ3\nV4PfNR+Jpq5+F03D3tyBoZXVwSCPfWSouC+iEMjL1Oqwof574YjywoKXnZ9s\n2ZPhbTsvLZqYVRLfeenTTjv1fpwJCFlpfZv/RawHprZA3cM5K2U5yF5wlWsQ\nCnD3U/oEwiFiwWiTi3Fq+5aoutmcDpWDqx2HTzjs9oKTujYnSjC2z7U9DoZK\n7rTpKFDKXmzxZuH8k91OhreoNqycxMyIKYXpHrr52w+A9m3CSdZ8TF2iNAhB\nnZG09rb/JTnOvThpTp16XNOuf7DYYCvxz5m0rTkguslEQAS93bChZeLlrs0q\nlewx\r\n=y9rS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGxAoQUu1bV/FnygULeDpZYTDLx1V4f9uQaAXsDnlcZAiBb8i1fvkNnne2kBsQonR/dcYROfsuhCmDLsNzorrWZuA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.5cde9f12.0_1596481248986_0.5449514524750076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.1607ec53.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4pgmuv5nYmyxoImWpFPg/u/srbqQOLFB3yagvzh7CbTXDegdAuKwGk5goNGqvSGfkusn9x362MYKgXcPgITNTw==","shasum":"def1ebfebfdadaae9dab412086085d3f80de706f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmSCRA9TVsSAnZWagAAGGsP/1AspajyASmrrYkYOL8b\nQEcGEjw7KFX4T6nWT6GIt17n9/PQau26lGmJzRhAKYlmKC6BBGzrk6wHkuE3\nwpG89pXufc6jlgwJQPNlBeG9C5mTY30eu3yI/inNTPgat+xXfOXZ1xXRXpHD\nUshIGgRMa7pftKw71SLOAutDTnuSZYqqaFgbYVxYw8sm2eM9CY9gFKqCnWMz\nW1Fi9G1/r789VIZ7ejvXVAyReWhltLpmbJQY5UiF1iJZdu8yAHkLni9+Gxog\nUZoWg9510RkIp7dzmaYx9YfqVyKJggHQheW7PyEb0QJpxKihfP7nacCKD/gN\nyNUpJbOwO9MZq9TPAp8niFXA3aJGGl1Dn6sWGN7H7A1c4bh370vz7DJHCipN\nSpyIjE+ZJSyGztKQQuSAt2DFl0x6zRqZgFKlXskUEBhsc60kaEE/bXo3o4J9\n0613TVtRStxAGzMJNjZd3oL2YfqVOC144i4rdfk7qqDk5f6bDhhlNsZhwu56\nJNcwNLB4uRKXDOIy1p3Wqkul1O/2pZeIzbir6FDGUAIr/KibY1fileE7y6oN\n1Y4aLPfPQuI+eMi8q6/1snpXtWb9+krsDiLU3GcHCjZLhFrAsMygSplnWFaj\nR+gQOWHwflL0HsRkseSvjlUKZjvMMEIM/wmEIXYkgaMPK+3d+l37tY3khEh0\nyQ6I\r\n=yzh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1wzumiDpSJaxzr7ppjdANQ7a8YIravRKApo/Uh/FacwIhALkk4YuOHUu90fJNrkVYUStKFQa2b+qGYhrio17WKwjO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.1607ec53.0_1596483986321_0.4758854252976239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.678b30e3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FeF5FfuwaUU59ZqYKvc0SmqBtWokX0pjy0vbWoytmiTrKbp7tjpT7GOt30gsLa3fgtkhpimBTiGeqSXlu+lt5Q==","shasum":"25323fc0528d0702443d2380858ca55effcbb01d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGp5CRA9TVsSAnZWagAA18wP/0PoDneJBToFYmfwLHuw\nC6k1d43auKc5uGKmRVoFY1d92KiKXd5HVVpNTGvUCW8s0CDATYRq+3U/C8o9\nuBdwa8nTymD+4YWI7vJlWKEbUHbN05Uf0bGzfhV9tgi6Rw5baKadGP/ZUNgE\nYx5QAJfh0fyO3HrR0Bm+cq4xw4mXpszk2ytLxwTs2soWF11J/bzgtWOQ4oRP\nw7HddEe0eVUsHmf8wiD3iwWidCuMPTUCdHnFXgFVXKPatd4++Y+i2IPftv2P\nfIrORKOKEqadf+7yJSn+ymfEOYVAB1l6gzK4dWNXDUOGzqYQimp/ZGEZzZi6\nXug7Vvvpcd5vKJCF9Zd5ub7iIc3QEJRkWOl2UJe4qgRObAEOy1f4j6f7B4x0\n3rR/xY2VWYm9LH1TEgc6Kg57k5IIksUAGwbQJhB4d0Dm5Hj4G7FfPRaRIyJg\nbPEgSvboYyBUVJZVKlXXl3EFr0LOojsXJqDOEtowH40N0IKoZ+BgWkHiUeVa\nc/Zcg8MPrIdIiSvlP0nyIl+rJFOQ64AUt4QhaXUYWTNdo9wSn/LtZ5lYxhe5\nL2duVsHCI+O6UEAtgsNlsDcqqKgwkkwr4kWGlSQDepv6T2ZMsW43CjNHoFVc\n/XfDRunoBqOhX+vk9gl+PPgk9BxW3DPK3ey2W/GCnt0AytrXXHROEMhV4Tg0\nES8N\r\n=11PB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkD+crEsFV1kTf+Mai5y4CTe490B0RunRc3ao7q6enSAiEAwt/W5c31HAHKJRxFMKyu4XFamycGJU5t2AhdosEEGgo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.678b30e3.0_1596484216660_0.11467984918202823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-slider","version":"0.18.0-canary.21c55569.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vh0j/1rJorBrFCXedkXgkrf+cXHDwpcLw+YgKjLRC63lZ8RtqW2MclL4Nkg1pPy11tIbG1CrJOe8pqBdPjBiqg==","shasum":"97ad1ef47eef0d1b0a3bc3a7e7daa26eef5a7c14","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvlCRA9TVsSAnZWagAAwv0P/jTkexJpxPh+HqhJS6OY\nTGIm0snM+eXxcMlPSxMSz8kMNU/TpGQAtG4IoX051DTAP7p5lmLjwn+Mau0a\nHCslqjmzhqtThRrpIzvCjLgU+0KGw3y7qitQZn3h+GQDJStz3KChDgB2ZovT\nRgTJUSOXTOb/Jp6Mt+Lg2Oobd6JbizbPUvgOLqJGMnE1KNjfqWKwpgrrTrV0\nx8vT6Lis4Two0MHpnNJ9t/545fihwKjSl0VAfNbxnP/qwEH/I3jXXT7aWVDP\nOICAdGoYwPtHiEKqMiReEhMJAERU0aN4nEBBemwozpj+D51gKxdfe73nI9+W\n8r60+AprenguzniEgMUE5TGRFyEx4sfz/EGKFpzIdfJ7/9UGQNS3HVflrNuT\n0qu1yirAdl+da9JxNcVAyDQXu5dfn3CGmliwEtg9g+5SO4V51b6MF70Ynntj\n6YzohsiqL/AHPravLdh2wfDLyAfysg3wcZvP05F4D1qbJvgLiam8t3zu4lAA\nObL3zFIFrM5sA5CXOvCmcOD4N9dFTIyB9MtkJV6OjX6zxeN06xooVhHaNnbs\nHbKFkzyznYPUesbeS36/GpeJiJNo9kxro4B8u9XU2v5ZXryGOJjgrbtDZ4zz\nUtC6OB5HqioWPPVhH3nU5GEw3EQ/s4R52si1bVkByTap34KhepFDS33uKJPS\nhBE5\r\n=P00g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWO2ZFai+xELNm4LuiFlQ7aQz/iYhOwzMSq62jtkyNoQIgL7kbfk+2mkrT6s6C4tZNd1rq9Wj6imgJYdjiLmOx7zA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0-canary.21c55569.0_1596484581404_0.5993712058039486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.907d4d7d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N67cKU8SEHCuJVKG0qVyTSGhrKWstCxYMQN71ZmDLhmfzkWxgJV+gcunwkLlVK7DKbN9yUExwJ/5hby8VWOTfQ==","shasum":"556b40e1ea5fd29d60a7dc77daad00ce5020e3b8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKH/7CRA9TVsSAnZWagAArjsQAIxQaBJ2lnNonWQjdp/S\nKog8S/Ym0k+Me9uvwXH5MdmooU4HSE/FXTt2sTtAyDfYeimmSnfPtvwqjrrk\nZiL7t/6ENEmdFvio+N9uZoGqYmFHhYVq0mo9RWpKnOj0akw3KQr9i1aRlQ4K\ngkgm5PKRc6IW6JvqDXdEdUWhUMW2gz+CTYLComdD86RkI4PsbQfBVmQ6kLEU\nVBppq9JjVnHXb8p+Hclou9CTWIgyms9N+KDSQzHp9FhCMQF67OVt3gN6ojCg\nC5q9vIxCwKcd9oEhlhPrIgXJ7YvDHWOf2ii2yZzXCgUbqEk775dg8AfpMVVE\nb1KI45adoRZt3iYmRNtYXgB/bFuFLOEBu1wxaQWBaMvvPCLo6eZCKZCwKw6u\nh4EsnT8AKBub4EdbnzpYXwBD889dJ3/YwRuVHep1lkccwvvoVd5lPq9m1bpP\nRZzI5OpStkwPKNlAZhcw+gs8u93/r2Z0mPf2yL88dW6iaoFbD3Ce87oi4zO+\nSLJ9SbKo8yvBpIdrPJ0EKjfynpZv6exp/LfE0aDu5KlkxmeysJbmPLjZpOOG\nOE6PYM0FLtJqp/93XiAiNbhJns9WUTGmZa0BXImsvwEbX1UttI0oequVVdny\nBRYOU0EKaFno25BBqMiR/UEO6b+gYzV6/yTKyV7FU1T+6fGc6U3GNzXnOzF1\n4QrY\r\n=V7r/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClwhsOFe4O2Qwofcrcgr0sQrV7VtUWVuSDRQWBy5QVRgIhAPtpB+00eeR7WNW/nAG52vrGjxBS5UBqS8jHtcvvRPz/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.907d4d7d.0_1596489723346_0.8238566433504841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-slider","version":"0.18.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-HKJV5PegWJ407jmtoyBl8bjM9oYyAXSGj9i83ykTjRn35+WJ2+4TpWeiDGOvjP+09x0WIzpgdKoBTv4MJKC7ig==","shasum":"59e2cb3b9a5601301249a0dede0fcba6ed800bf1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.18.0.tgz","fileCount":16,"unpackedSize":84486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIB+CRA9TVsSAnZWagAAujcP/0a1xsFsnHNzWNErBAE2\nZthEBfPRjJ2XtaHBq8IW2j+eDMm9QqdSK3sPId1BuKhnd468s1tiCAVEg3Ux\nUwmfANdyJAHVzS4Rf4HG54MyLQagmNXI785KPkKIgT7q4horOYjtvLdqazW4\neTV3SSGLSmBsziR4aPN9ITrAHQHnlbWdKrHXDYUOwaix7GNYYGOow6XI/Id5\n5/Koghl1x+1BEH5JeXsdFs11z8LxfKpJY/MnKshVULpqzxnvSyr0LfEl1sn7\nspsLu0WAWE7TCJcdI7rr/Jw5VSeKCp5YmCRBxKVWqSIuwmTTiRplpTsDGT+W\n4TKW+ku8XBbPVhu33E4oTIStdgEKBKVTIxLJ0gpZVurukqyEV2AelZDOyyz8\nckMFQ6+ulDGYhjl5EkXKOOIatBVdkDKT5IQHzqh03fGMi8Lt905qNRzD09n8\n3ItcrT5msRX5EXu5/KKw+PvJBTn4ePDzxN24ASAywpoXMeo/1LCSAfa520pE\nh5kbK7j2u+0wMM/p875p4SYZOqYW8sFDk2WIHDpgFJtnKWSrx1K5Ey2mTZXT\nxfaKhyer0YvnnmkGB55yx6hcQ5V92dDuc1fmJpAnYVQ1Mtwaj75aWlKvdPqi\nfSqLYVUlrG/DBp6rMJ0TX0B2iahb44FdQ7ddiCkYivEVdkRLBMXv/8WjiSo7\nYe10\r\n=SVG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCdJNMIGvxNFvizCxM/pN9fXyKU0Ls0ye3Zs/6mWKRMQIhALZXjBcU1AyI/lo9YEabV3oCSPpISvd3oSupEVKNCuax"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.18.0_1596489853646_0.6904632647058144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.f7958e4a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jYedfHADBBneguAr5buXVtm/eJP7vzmBYCGuMbaEH9q4lQgRgdjN+DufepDtn2u4vHdBJfpRbzl16SxCprTYwQ==","shasum":"735c4b845f81eaf25d146caf17daeb6a1481a156","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMKoCRA9TVsSAnZWagAAMMgP/2YZNt3aRzxCJIBmrC5C\nWQlrlVo6l7nYcxZnlcgJki6KXP9Z0g6VZAoYnKf+UWeuNhQ9knL0rqNlO22u\ntxZxm1M8AASSxP/nm0Z4pXk4V2uvru/BZE6ojIdCXzX7Tgn0bwDTDxh0sfhl\n04IP0UIWcB6STRLO/+bQgyoMl64urG6XxHziqGG8oyhxUwH2wcfGrZLQwFKY\n8X+EVQ5JfPB45XVMQ4Y6wsqxiYYdY1p2iXdk4uCeSphyA8pMGr4+lugYderr\nBuLg1LRJcc15QOGhXkcwh1OpYS1ZXiTip6riPq6FVPddQx2Wc/s4Q1GBSKtS\nqM8FxKvzY4yeNQ/K6ZS3vlEKDC5NCmpR62nPzML4rtklzR8AU9TvF9aXNG7O\nzJYAwiqw0PkncXD1kZhGo/KXIR22MGpdYv4JfSA90jli/QkozkGCeYTkE8T4\nI2d+DTkk8/HBdUp+LHWq42tqLY/9qbHqQR9TcAKDejDevZA7m6pkmvtMgQgi\nA7O8ldZTH0F3sqn2B5V/5b5oMHVzucya6H2BxJaDQjj0DEMMMgDITSVZ5HeQ\nC50SRB1xsp8C85pLQt8uiy1ErIhWptAFiIkAB7f89P8yqU1mysMvempUhHtg\nXYa9nV3T57au+XUHUzG1h4JIoTmlVdXx54aYOEyHzVZYaDJfcUNiftL0K86h\nTdBf\r\n=ZlQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDG24SeTiGNKga/zxubIznEH/+A93zXHwXqEhW3IZJVOAiEA7oOcukJiHI4Os90lzC4mlTfOuo8DTvCZfWgjrdyQS2Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.f7958e4a.0_1596506792596_0.5153664954259638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IPxQbR061SfBh/htp8CWR9iXG7MM6Nj/jUgq/Kk691n74d+8DTG8W6pIrPFvXTRmPr7dUU9FDj2XM3LHlCnaGQ==","shasum":"26911f1fa5575629040f0f827e9c9eae97617215","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRaCRA9TVsSAnZWagAA4OcP/0Ncog590zPSwcv57j15\npG0hEcdIWyGOWw8UNG/zJC+EoOYVjc0+vuB5ePcZ9xgHGoCuS1aNm3BLILb+\nUsTqvf3gM8oG1swpUFaU0t7hs4ONoNLFP1m3vnDmXkrlzHif51iVbSeEY6Eq\ng4yHKXFYvYgdL52vkSJf8rtWUwvZfV/KZLEiX5/oZL+HY+H6R2Wd/Ry+py6n\nVY2XFYhPW92zYoPAgiHbvK6fkDeV2fymzsk1TaWe5n8yy35qWGfK2M3n4bYZ\ndbRIBJVdvd4pK5PTFcWB85kNpp5fLl3u7+9vUk2iAEHzGakUDhYATUOCE7T3\n67yWvNMz78d7VuNx5UgAVPnj0Hfaq6gpsX2u5vBfWCmt61PBYBDmgJocVnHk\nStnGfkZoW79rDC58XwDBsV/KddvqbzlCHxglIa5ub4Sbduo5pgeLr7DL8J/y\nWd0TDbvsIw+q9A3nz68DRk/1XXGFdfSb+wUqrv0m6Lt5P4iWprsOqm0JkKfr\n2VAev9Ro+n52uRcY7cXYLsJbw/6QK7RxXfPg5hOOeJi3Koq400dOxBPaCybP\nvdjimR15s5LWGZUXjS6xrp9DOqvtJBdv2rawwKh52+g0QW5yLGTTeuWies62\ny8vO4aw0JkJ+10PMVa68qaSiCQUDN9lbYH8NLaoKWXZEBARvVwKXbItu+5JP\nOp6j\r\n=3LHK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdH+T6RUyad+CJRks1Y8w85TOf39VNWvIvScgcZ+Hi/gIhANk4mT3KHGvAm8eIXBLOHfQbGVGHQNBmAC32jkTIs8Ua"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.f8ceaf79.0_1596568666151_0.7367427318856083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.6b9e385a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nzYU6tn0A4XOVK0p/75APSMLanYA3WrJEg01c2rBaqkxZO29cNL8oEsNEds+ohQJxeOHrIwUe/k87DB/E5MfEg==","shasum":"b480a14a50ce909fc4e4773f1b799c170b52606e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdM3CRA9TVsSAnZWagAA0vQP/AonEYXr1pDfUUtJqW8J\nwy7YEojx4sWd5ocXB7QDx9V6Tw6RMqjD/SqzOZW1JguLhp36uFqf0scqRd9P\nwJ427aM2iwGLZT4G4ax94o4emJLjg+QRd6d/jcWbcPWa7Ey6h9ddTeWX/P3L\nBaJYzT7mb9cgi1vHPpwLB0tBtvUIumREZl98FS26D4cTdalHbA9nZNupFmqR\nY8eGAM4H42oIYg1Is0zz4pPZBCWLlJ6zXSGgomIHVmrNG9osUt1vEgVIXak/\neIynE3gYLlO5v13nkFxup3TzDdYCW9igki0pI/goUOZ/wSzcJt+PubK/XjC2\ns7ty2524MVoYtZ2Y5D64hDxXDI5IIZa/iSINT8eZ7x0MwtWtOtAYJJqe2AtY\nIvjcbNok9ahjZBwQnx3F/p/7atxflwmpeuSkV3S5qTQdPin6smw57TgPfOS0\n0QSp9BVZweVGi+GyfeuUyehgL2a4Hz7JNAnrzD9I9leNpVm9rz5VPtBJ8lNX\nbtEYZ8Ale4vb4Cro5HsXFajY9mda6J0JMsgP9t9ZlzjfFLVtHzN6qX9pNC48\nwgb6LwjHSQfunkx3Yvd0pujBJvSy9UzVI+7/AnOTKDrib+oIz8Qpdc/p5tBy\nkaE7adtg0l4llj/XlLoE5PeEzoCivJwbEOynP91++1H9VoMLSzqQZphyD44k\n6nnn\r\n=+u0q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGa0GQlQXmx05BLZyd92SJ4Nxmuvj7TsCWgNf9YsS087AiEAjrMcKToxw/4n78h+0b9KcdgwiKMfngVToTKg2pcrN7Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.6b9e385a.0_1596576567384_0.7033400679287838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NhTii0gC9P/ArmpE2Ybys83GoPKeWajJH3GsRqjqqO+935Y0hfAEtFLsFQF7ddAGzQ4ckXZv2x8yq2UC+7sjtg==","shasum":"d732dbd0ff79573d7889f28e2996025bd1793b39","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitnCRA9TVsSAnZWagAAH6gP/AoPzFqiEdOcpy0VuZDO\nvRBRaOjEV3XLs+MsG6dMNI2enQ0EJnYFABRB3oJfsWOZ86ZfZ5K8/SKcUzYq\nsiUSWLRGIUwITYya/Zi1LFNuXHgQntdzNukUJG3iJmxLii4Y75AFH5ieFA6P\nYt8ql8WMvDtcCarBmfpGkQfxj6Y/7ChUPZcIvsvHloMwjAncQQfx5wyxRx7N\nXXfVifcF6i+0J44+Kd7VDQ9CX+/Hjx0Ium2Lyukwr/BRWWNZ8NTCP2ZnP7ze\nmuPNIzNCdlat9HKsi66WXMsa2CDkeklbNfIR6cr/FHVdDQnEyjHVTEGb/3NG\nP7FOYfuyr8spVhfWUQhPkH0ge0NFSE4t+Zqvl3qdjBm9WZZ+OD/QYokmsHhO\nOZ9vy6TTDS4IuYuzuNSTtgNPn6c31zue/YZ0TduQ7tFQ0yfbZmFd3XBikckZ\n6XuINop7iU5bC0muHQ6r8dNWvO9XEv5P1U8uhlsAbuY5O+BmJuU9NdK8PFnU\n8v7VRrF53rPA73HJjHcS6PboqOQ+mrbJnqrD7qGYIaEqUJvZLfCl1HlZVdYZ\nmo/kE5ntVaMUT548WMW8SdgY3cw9DWbIdddxtguW2Oci1JB6WSWGGeLLKq2A\nCj1EvmLNPDnhaoJApg3Jnjk0ZZfoPQ15WNC0Wuiq3jNhX3P7GqkvFlUryIpO\nDXn+\r\n=buG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYjsM71OdYM6dn98bOmFn63zClHdiQK4CaBoCKS3nJBAiBuo65b/HE5jw1uz2dj5kHGOz8JafmKo29sdQgkCiVIxQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9a7e6d2a.0_1596599143006_0.7481794993409292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.188f3f1c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Hfqq8YhtpLvy+KqlNKyK/hvoxBqa1Jf0AG5d9QCAQlx1JbFgIya0l6pRmlgPOWA4fRj0LT9kaE2kXAUT0aSTmw==","shasum":"8233fcff53d9886d93cd8d3503af31f0b6907e87","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvaxCRA9TVsSAnZWagAAafcP/RrJos3sG111uEd49GXU\nPGckFkkashtkUDKkoes4j9J474fWwdkcfhTtdIUJEs2eD6/dGVKza+PiXUBT\nXLGuE6/nHsMKCVxCV251zg6kDEFM5FSTbk0Rfq/dYbKNOpZK6ZGs0JXim1NH\neFJ+ofv4dXbcrzggP0L9W3NtO0+LLdcsD1cWI68KNvRWxw5qwlsYlYqlpAYv\nGkJUlxgXT8QbzdYg2YOW0TU76UgXO9SPynsD6mOrg3r9eAunRTM3ZuU7di35\naB/4/fo218zErKP3v5OZelbmrJq1VuX3x6p0LyxoYUSucyDEyl9X42x0tmdA\nRMKd/Ilp2AzcBQ8rtg2eXqLs/SNI+uE/cogcANjqgpbO2pxdxVweh+gGxVxe\nSATzx/W14RwkKaEMhJ6SP8TmSzwNRcexqR2pa4fUF/naXUYonx1F+r8IJVIZ\n2S+6kWy/44C+ZYFipAQMoKq5FI6kC2rJm1M7+9u9jPuMjw7Tk05cjvdZ9ncW\njfVE/wsklb9F7jKGHxeUoJq1p5YHlIFZE1qm+sbcbE8FiCP32eXMsBLsu8GO\nTbiDMFxXMc1bez161Uih8HClpXaS2OfPqHfVm/JCGtYFTNdk1kPoxYUngWSe\nlZkoN0NDDdvm+6JiaZLVeiQe+ruFv4nIcbARX+q5AUy7kLxsoOyKtKG/PTjb\nFspG\r\n=31xD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1i+inUMHyjppk96eBBJrIXeglbYe67e4VEMCDsVmFwAiEAwHc/zqsK53gnIUO3h93QvYph7FTZFNk7+FrMxDD5jrQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.188f3f1c.0_1596651185457_0.4314746971022154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.b6106add.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gUi+Rs6AurmZ6+GWACR7GOlN2p4Tg+IyLiIRmPSSaNHC87UttJzZN3mqc8oc7xKAAq8r/J2Q2SYIP5nwIwuTTg==","shasum":"ae76c0427218d9e9e19c4cec9c1fc635e34fccb5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtCCRA9TVsSAnZWagAAgCgP/1/eH5LE2jUYaJcyVuod\nczWt7MnmkYWee3GEK7grrN3/U7mJPSlR16cyFethiAN7dBrwZS4xfdEpoGMK\nPemDkqXdsjndAY4oe3QLjCc7Y+5jUUujEEEXb3nwXo2wv8xp+wMBoouOBZsg\nYqfDQ8nxAEeHV4RzGx2TffYxDRRs3y8z1wd9WesPgYL2N2bmKH2c+hjJ+R6U\nN9+w2v/maBBdo3CE4VnybA3dc+00wGArRQ2IddB7ey5ERJgJAUq++KjfPW7i\nlfqBYK6d+9BJpbxfIWhHKeXRVZMkNBYTzAbBGCohDHX934gk9jvFry8hWYwJ\nmEXEpLHKYS3oWnbX0DXH5Ny55eCFRNvYbPJo3rKAMUFISfagO4rDkSFnbh1T\nuA8y5/uVbu8x8pobnJr1AqflkJF6t5HfoFoeiMwjHSte/2bNsF6cx9ieXMfX\nhtzG8WYkDSkrzzPajWtFrt+LojHD0uOlbO0DfG+DCJPsD0mlQjDaHrM4wS1b\n2CPzFG9vAMeYbxXY6h1Tg5mpZIcwDNmOJBjJ8nFrmpCbib/CM5+BmZz2VXyR\nPrrYSgMVn/sOLZZrMPwDormRllcXLZNSJ7SeaImKiDFlg3Ke3LWKx2Nnl2mD\nUS1zBuNWYcaobwKo116l2TBbbVy8kjrgiyKHte+Ec0xjmCZk7yGoqxFV6WT9\naK+R\r\n=axgF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNZ6A84zv0asO6kyDBq5sJaw1dPcUFbIWltDG3+PV4uwIgG2wH8rl5I8nnzlUKpv9mN9bMspVjYifHo9x4HRhPoTw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.b6106add.0_1596660545992_0.6027135179892322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.ebb4c667.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-krJwLaglfi8wKggjvlb250msKYQ8We3xoiWlVdBQh3zl91v/6iYKN1/UhgwLNahqi0uoZRl5EQn0hFYcMmmwrg==","shasum":"d3d2318f94645d96d2c84b1c58d9425b98decbb6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xYCRA9TVsSAnZWagAAMVoP/3yQOKetrrVd8GbxJ9W8\nfCxgkDCxUwtawn1iq+TG4xuZJQh48LieWWIthIh8WHfw1h8xuKtzj2n/hXpU\nO7edA4j8GBe1sUFmlnW8mm0QZc1resK3vNVoReEvN3VJ8U6UsBZP0y9Tl7DI\naPG0sjby1qzF3vuQRNnbDMARAket42nNqmmqYloyzLD8FMxZV+ulSa8NZcgZ\nISeN2+bKXCkvm6zXcg8GE3iHmGBRliqBNWfCIyZQO6l0FJ744MYqO7LxbUIj\nET0A/Je0r8AucRIdrrZ5ESW/YvWl9Ap6zRPIYevixdx4T9Ot3OEBNBwOjBzf\niwryEYDWdC7FG5jbK06/45HiVrpl45sRStuJcNwW3/Wf3bYy/ywgFUrJPUmq\nqj/1xMS1tC/UO5pKfY1Ahv8BuFQOAAVC4GhcCNBNo4SYkCtVB9Ax0N+Jp50V\nvfKF1b12oJ1aJW6SY9QIxpq4J96Zb4EB91kSIIZXf3Q5zC8H9SqoRTEiJIuJ\nwqQwmed2KgmhV108n9rGH+Jasu/HtzSepwwpyBsxH75joet6TkVOnU3LVaPy\ndqe7173aSOcv7Y332gcICptNMKGNZZVyBdijshia9q8G5ts1zkMUWTCXGBq9\nlzHeMjUakbk+MwNfkJ/ppx4++W7plFrNu1i6Dec/jOwGZkCzXRRBktcPMyjk\nvr8k\r\n=eJJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBULOwnxi+V8nXXIqcdPjghlxA76zQWeINdz8phAJ5t2AiAEqJNP5tELG0FKCRLnrLcYHJ4zDvY5Jg4KoqR+hw2lvw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.ebb4c667.0_1596673112168_0.8132288104843128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.aa44289e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ofB9Wv0WDpbIFJw7Uq1eHDtFhyKmFFgT96gzCAgtvM4bHBSbDeXdzEVHPy+VZbBju/+0iwqse67QC88OuXfX7A==","shasum":"5acaebbae8a6bb3c7f9e2a0fafbe5adeaae74b11","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEt8CRA9TVsSAnZWagAAytIP/RgRnd/b1RNppS9skcTE\nFKNSbnSx6hSSfw68E+zbZOoXElcBE9Tgn1nh7bSda/Lj5TmApXudpKZQntmH\nid/QXZWxVEbHEgMu+Wbyji6h3visxfEr4NN8b7UZPVburOwqNinFAc/qeAl9\nZRHMdyu2tBNhpnz6FtNZgObnIf/zevKhpTbd58WRqCe2t8Br4Z6domjDDEwG\nN+FYi7jagFERAugFu7WrtUK1wEQn0VjYFyFNiezN588e0VmZQbw47+tACwcU\n9lvTtnC80SJr9t6boaSRq8H70j6ffEhY2PwaDbtw1/FjYTVT23RdEFAgpJgt\nXOH8Z7m0k56b0+PcgwyqBT1M+lrxI/Md0YaPHi/hZyWR0SMH/YR/EcVEDs2g\nkiKECaPWpciwARCNx/5OObUrj5zAkHhIQeAXAdZFNLprdCh9u/TuaYp7EFWg\ngq6ts7DNIlzo/WduVKm0mSubFuFx8sXwvIM6OOJF8Rs7BwEP7QG0TBOmLfn6\n8/APLLPjMBscBlr/TxurGwBx00Wtn5m6HhJPkWUjjANxldlKP0Kchmy/VMOS\ne82BAup3jirOejVHkBVRhPEsGxvpwgZmDvcvh7J0YwEGQZ1BXCLi9SBRa9aW\n9suCEJE1udEAfZuL+kr9RHYdYLeQhk+Dmb8HpGQAfG5ibNKat8L5szipOEcp\naPdU\r\n=BlIb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhoT9FQ0ePLEVU7YU9G7poGh10DALlc8mCrkT3w3v2FAIgTxRRCl3iuCGnxZWBJHn0vKV5K7GuY7H5GIfOp7NUz/w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.aa44289e.0_1596738427937_0.10033594708973603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.e6b0816b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-u5+RmH+x4n6uYb1D5HPEC1PZZ45cpt290JJHsRu0sa5zXczf1KGAHnhlS/kkgIq+ADbA2Dvx26OggPjAuXKduw==","shasum":"d288824f0823d3be1ce34d784c006fdb2fbc7a6f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDPCRA9TVsSAnZWagAATmoP/RdMY5tNXhKiodq1Iy/W\nu+Vy2vIEZ5Nj1xalzy7Ti8mqv0o3Vo2x+ahLzKB78jyN8FCz46OzS+pcAczQ\neoXQPz8JjUPL3sv7gOX70WIX4KjJ+kPuJ5y/kCFWXlLb9tesOK0ud/mX2fBZ\nyVPxziC8dBit8ThqgYp7sxSmhHYY7j35SZpgZaAAlPLRXZJ1EAREG8Ded/Ne\nu7Mk4mj1EfVSk6LdQaLepIKm6xC+gJPq1RX9w7qbBhgNnkRGOrGKGT7v6zhn\n8IhiGJIwQdS5R2HkM+tTXNWx4yxgjhGZ3/S+Hqjv5xtt3SnTXhY4OYk+IMn7\nz/nhc17cwMDWaVmVt7wPs8Y4grubOVuCGi5GIBXMrrTtDbsUCRUtdh+39nZV\naPE2w+Eo2cOtEdeYtLk65/7u2i1DaFOL68XDTNcQ7rbusmmYfyb979cQdz8J\n8PXjY23qIP4k4ruIm2pB3wDHcgzm37zeFaqQA9mJWXsb5L4FjmJaXzdvXCK0\nR2dL4afeLYqA8g0SBz6xj7mneTe4Zs6jRhk13TAwsAnOWIAxIVqaH/SOHQ49\nFoBcTJzvdWEZrfjF0RPDuECwlXrUmpFZJS/bnS0TjTsFO2hg/aSurbV3i0gK\nuB1c2ILE5BtVv7EpWg812avmnHMzD4wDFhWvjneCFBUqS3zTzNaD7e5cVwAa\nudQM\r\n=qaw9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9/P7I+wRILuc8J9sxYsmoLFKVuxrzYMdHboM4k4sG6AiEA7Ls2Tlf1GYutKfZ0Mp09Pipyzir88ocbm2e4IT5aYBs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.e6b0816b.0_1596825806779_0.13123887670866963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.96d15938.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8YCSN8llYeqJxwOoCdeMP0xY9fvOYnJPXtBM3nWEtVWuRQ5lYd/utFOQ2kz9oaf6r0fJ/baNyIPgwyxuCLCBCg==","shasum":"2fe613a2335d690bc4d3be6343d2ca5332c0b012","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLblzCRA9TVsSAnZWagAAzlQP+wRsFOmtuJ2yhIAeqRsX\nuQP7N+R5UfJ9Kr0g8BAOnmuxADNEcqMde+weZ7GXio/hwMWd+NGygUnw9w2M\nzw+6ToQAnSmV5tCg0u3N9mbymzZVZzF6MyoK45zBsy4rNVVWGXJ47YPyAquz\nhucNmxZZpeu20F4Qf4PBL695WO2aBEW3VrMlF3FurWYkO5PSYofQ9EJtgYAp\nj2+DnYEtl+EGFSUnT5GZrnguF9lGMevYb8dsze4JkiuvFERe6Btt2erYi90I\nB73DIc7dhvYuxtdx6bvApvfzlzSYMjbYTNmnWk3Cmol4OIKgWTtFi+bJOU4X\nPPFETCffG/I3UPrMudIQLXhu6xbqvZz0SqnJjY1fPiDSSsnzQWeIwMnlE8ac\nWQChch1NcxYdmsvKkKn6wup0m2GFy0wEVbZzI/yi0tItyriFRVHItU85PHPv\nzWml44fKoNSIGn+/BVO22ma1T2Z4ORqRtl2SoR9K6ii2s/g2XICrP84UfsJ8\nuilQCdIRTcIiEfEAecERYjLBrtBA2TXQBdn3xKEfqTqz/xewHkFozJqSSkEj\ngUtu4WBGh9oD8eoE842NY/lXpSuSvpgI3v2mty1nOJThbDWL1OM0qsfcYVUy\nQ9Sbv/8ijLMlLa++AnR7AqeIWbox42LJd+Yigo0f+DLnL9vEPPy0/c8kMj7N\nsEJL\r\n=tAJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjQ9Xo/kVjRRceVasXtzSHxBznj0s+sX39+J3NQhQW1AiEAnSBhyO4Qy0fWImBqmyKREb6gxd/4ELAAq2AFCDtqnBc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.96d15938.0_1596832114690_0.009039094796098768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9d991c8c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-idcbb1GQgHXMdA2bbNnZ+CYCIaxoAHfk/XC21qWwk5MVidUYYeNi0gpZzLhOP2pU5jHfExhCMftgU2HCaVNlCg==","shasum":"dcce880d8a80f6de0508c5645ef6803ce76ae174","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDLCRA9TVsSAnZWagAASEAP/At0J1V1/30/kJhsbIkH\n/kSHuGsvZMeGv0tUsM8PLVeOxcdSA8xHXtiBUG2f7uEwCQKxRZnN3kgMnxxz\nQBhGbBpmWPxH5A4rV39yqeDh7Bllz4dAS+NKNt/NhN1zWNWV+oEmTzPtJmtM\nftFYSL1s+xoPbcFDAXe5qviPdSZ5gYzBt5qU5QKhTAXAuAYGdozODqDdvqhK\npEJQm5UYonCZ+RnRrFqjSI/Sd3MaZUSXR7dq2rpkekvrNRiu6NpzEA/JFFNH\ntl447tPmLCRYj80EYHq2qTM9vXEaz4RpDyfVXljM9H2aSXA7FKtEE5tDD/sg\nWnHK3njGrqFQ7HlhTdWth27yjM1I7FshukJ1FjsaTDefjlhTLA/tG/gzzbS9\nHsYKN0JN3rNoGarU9qaArz2KrxogLOt9l2ViCgQDXNWmlH9LkEjsP22XEdBO\nbTIlfsGkFeVOPJY0Q3WPY7sBtCr6sOjrmYNUauGj6rsYbpOxfMypIx8gHddR\nJ6xZNeDWXjT+paJI2NGyO87FFGQ+byl22S94xrQ4fsKU8WU8U7AcquWP/NdX\n8kD66h8vCgJ01GA3bki5o6WWlQC/fXrjw9nlEeyVaUFuRAnKavZOMpg/n2eO\nWL9nLgwO02BtHdOnM6A8+hmNycjRklDzPzVf9TAwoUIbnSyoHClHRBQozHzf\ne5nW\r\n=oGK5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVx9j2bSjQE7fE0DTimWou4llTjGbCEPgMxDX6FRIgvAIgTVB1Mt6Oa7i3IrgyMpPRf+Wd4A1X9cXSNCtFYoz3d7k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9d991c8c.0_1596838090552_0.8526823753907997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.13bfbd72.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ggLgoUtBuQ+P7krEPAAelYHtYLDu1zTygZ+vA+y/X8eYxiN11epjEBYxioirtVezOsxXb2oF6VeatSInobWowg==","shasum":"e660d1b5dce89c35fb23409271eaf36e6056638a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+NCRA9TVsSAnZWagAAR5YQAJLXyL1nZ8q8jXyRH8Pp\nqVHMQLQaJM0lFEq+ArOqZ1qHoa8PhA7hB2ar7gOSBVtT6EjwriA3y5OWeolr\n8oHI5tLQNoZMOKLMazoB1vLcXR1B5jjXBMSyMOztsexIYOy+Q80CpaGKxjjc\nkamxMFD7xNBH5vt3ahud0saFoBW6OVjDG8PhtS39ujtkzIZ7lprPKbRt17Cs\nCU61jRvrFfseIfOzgWWO9ER3SRQ04Mfg1FgSxgNQVEsV6AL7mwd/BaumCPLA\nSP4nE5LuRh73jXd92zQz+tgX1eZhqFsfaGP6KiYHH1iIX5AhQKvWURP4EBVb\nZYwFbg2Q/eQvc/uK98u0bdqddNCxiaPMlkhLBDSbkojqYfOTJzSR2ByDrcWd\ncc/F4XuZyMKHoWsdPWnjp6TO180T3zUP7tT2w78f6kzqPCFDj96b1L3zJqvy\nI9AC90HmF0KARsgMT4jqWQY75DjM0GuladO1ZNFlFwTVAQCowOobtXQyIqFC\n8op0nKE3twwf/5Am5yfBN8IVq0Mrz1fFWw8x69yCfiIt0Vb/LT3iKqau9dua\nV5SuLmOXnY0xsL4pWcZ52So8D4X/UNnuaUF3pzxDEwVG2sojEXTOl16Lwo6f\n0RQJSvH4gPAF4GOsBlE5AbyTbsbFanM/ormuiQVMiown6HWibnrxp6E9ZbAR\nllMo\r\n=ACOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3PvMI+payKI9CrVevLdAsIAreOlQnQxQKAq6r5+ri/QIgKc0Y/iNbdXGHYNvIdbPiTmU23oumDxnO1afhFndJJnM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.13bfbd72.0_1597087629096_0.32473565179075226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.30b1b258.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AQTtLItANkgJc2eUlrnij+FV2x4BNT+06NFkei/YdMYb3HTeNzRHaf6EDCcc7fkBeU6oOhdm5oRQEYr8m/0pmQ==","shasum":"72bfa2669e38a4cb224778fc32e7ddea1938e80f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajRCRA9TVsSAnZWagAAZNIP/j3v2AAB5QkIt/SBPXtW\notUB6zKpGCOfmFdj7Aoen7Q2yBi4F3HXNOuTakyJFCwG3vJJv7H5w+9XBryi\n2Js2Xhi4qxdalH6JVJCg8SHQoXmzeJCZ9mAmiYTd4Wh+RkO/OaIpyniqNCl9\nKewH5IeGDziSTJBCl+vPO2lWrrEgkuVoX3EME9MxTBu95wthdSGH1/5CjFmg\nQSqQQGKxpemndtli8iWe2CYv7IQb79RwzsnkALNBikV3yFvIihTLO0AlFF0N\n3L+EEuPE0jVaOFIDFBRmr29frrAGqqDKYF2TR3pCvZh74hXC2thQnCVy528r\nQJB/+HiKDDiAysmYmsZrBLKzwKqo8a6ENCTysbox45z26fC6mBzhDz7sLMGz\nN5Bl3TGH3dKyxg7WHMz3CGp7BNk9xJjF55ZQGg371wUlrAr57uevjpp2IaWb\n644PlVEW8G007Vag4wSCn7PljHdSnzfBxauTTNsizQt228RAUgUg80pXugw/\ns0Wm8whrcVTGfOtLqosNyPbnPSlaRISZV5G1/m0T8YzBly1MHNC8W10tEel6\nRsq5JMXu+iAKcq0h+u/xITLCAS+q8o0QddGG0vufJMk1j66RYtNn9DzXGdBX\n5NXAxDhOLqgRsMxlXAy5V4OhDQk8nu0Q0xAAe9n/4fPv7aav9cMQcAY30scJ\n42au\r\n=ev3s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfD7Cv/36JtCdq3w6rSeLmv5ixOilFG4o+AyVlkmD0rAIgKXTncoROgA8FaPKXZp/fM8cBxm9V6pNoxyaclKfntvE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.30b1b258.0_1597090000670_0.7572949964722344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.1583e263.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ndvmeK9jWwMUo2pi9MvXwMlpxaZ53glyi8n0aEFK4F9oYKaIZr7UEaIRhCwcyULsVPiUvAyPPLJZlYvjxbWU8Q==","shasum":"29a950f73a84ab7f7decc5e86a343df02086dc37","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVjCRA9TVsSAnZWagAA5fAP/0JebqRvARrTGYhkw3mV\npK7n8iuHVndouIIcW8J//SvY4ez480WvRGt0aWvkurWhEM0tiePPN49CUGUy\nx86vs/Mm6iDdXYGi079955RL6PF0QzWo+eJAmmzSZw9jRVNUPVozvp/+VLaQ\n3RbUQGhe8GIjIT+YJ6yWEKwiuIGONa0guH66WaDDawn94N7PY7lRg/0A1iPp\nniJMzGA8Y6hBRiI29QzUs0mUZA/MUuRy08qG9xxQFenbXY23t3VdUW3PSjKO\nk6UUImc5+JX/CuJagJhy8vK5DLaLZMNRRgzYBNOW1pdoMt36ms89y0KXCmuc\nFFnDBjVUXWvfxjAbhUMbEewJNj768aVS8Czeca82lXmmc+El7MYQyjGd6I4O\n0VrPsOTKdAUejxgGme+xvtuLhxTY0WSOG9BcmhZ8halY2gRmiYuK9szEFEkK\nJMV2E9nNVvT3iu9afp2+V/m7PbXEJBEpoGcmgmm5hX3Hc2GpNRX7ovo6cSBu\nWdcFrxr3Gdh4CD3KJvhuJq/rl7P+wTuk7suDLvxv0Pfjf2amPX+G+rCmjN3F\nYIjdJlsHu0aoml7XiULmRxkG18xlY5x9QvJidM24RvuWk5HE/L7kZ/KX64y4\nUNGrVTg+jVgTjrc8nD5jthTW20rmWpw/GDKudQU8wHtZc0X9k8bPBuKIxMjA\nxvI7\r\n=kknU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyMm9rzSWFKyBi592dgqX3/TgQszVRrWeWqDzdykBJrAiBa8tDsRTsJrb5NJNUpP1V4lMPLOelZJdmVCHGPsR2QsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.1583e263.0_1597187427143_0.9385747661914321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.fefb1a93.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xqRYbQpZuXqpVKJu7eYNmdw38yGNUiPNEIagdHrMG3nzShKsD86osAJvCBxZe1nMp43VXILh9Lg2mWvysTQslw==","shasum":"237d990c2cedaed7c8cfe4c8e74377cc684d7419","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbVCRA9TVsSAnZWagAAhawP/iI+QUOFjD0BDdF2YUXn\nehW7dsYlWXeljeqd+tqY+0e1Kup+hbPkhAx3Ka/Tfmi/0qkvvoApIiNPRmvJ\nDHD8p3JXz51Wi1CFi+KnIVL8lxgGtUIByFGcAcLyK3DCqSWHJjlfNrBxSq7Q\n1JljkqnDDae2p/ZpbQmtrArsy6R/JEv9lBX0qLywShS9gkihZVN3FpsNBfAj\n+0tQbQW/znIWRCL3MfChKWC9EMXTVmlfKrA3915ulXqY2OMI8XdMU3W2Tdta\nIho5cDC8QQjFpiNX8vvglu9nNH21aaV2IVTq2ziJ6nPHOr58SR+UqOnE3B5O\n999Yg7+2uQtbCGh/9iUXE6eVFtMuLVozpmPwJ0X2/lYEbmkBK0ujEvhCXuRC\nypUFUnEJgrXHSxxZH/+UJ38bPCnuGKCzvg/kbo1/F9J6WHTeQo+wMYSoWUx6\n3U0ZE+sft3q6CJV/qLFeuLoi7vgC/B7+Bv8d1RwIZZOFI2txy9U4pq/kZT/3\nhZlxzp5dr0nm4nBNyuDbYO6dPWy+fipxAZup1nVtkxGij+f4WXRu8GgjR3Mx\nUGHN7anhntGhqW4VP0D/rSeR2dgWKzHk0CzsxY5hv4o0WyFnjsrGBGeJ0b5U\n6DaKiNa97NlnpzKdLxKwY+Qo/rZMVvpVW9ega6J3oMRCFQ5bbataw6JADkjJ\nx/9Y\r\n=MnBp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsmci7i25JsgPz5ALTQF2oIj4XzVAqB/UNcjKkU59bzQIhAKMzf5xIBzGqGSWGpcl5K+hDp4NXPl3/8u8vUmpS2m6U"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.fefb1a93.0_1597191892778_0.48499807893691194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mKUKicszSE/rBLPGuLfDGsaAo19JooXG48X9wrDuPuev5rGu3iCGYPl50Q7+6UpS33R0ror307FwxWP7LjKEVw==","shasum":"4afa51c8824b0dc1e66da926e123a36ee4de9c2b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDR+CRA9TVsSAnZWagAA0t0QAIDx3C5wAASzxhLuGtdt\nMi69tycCKeiZb+BwU6P6EDHZ523iUMp5J2xl8sqihQeXOVAGRiW6d7NZySRK\n/Xmc1A5cmJ5CJEj8D26c1zQtm4EdM2cJ7zS0w5R7646rYmo8sbmgpcD63WAh\nbImGofu6zCSvNw7INudfdfbaFi5jzo9o4vhiqlg1Yp8p9PRRSJQ7W6pYAY7G\ni/ftFo0XbWDaA1S4ZxILgFmsTe56F6t4uG64n4Q14kJmW4GF2+PUk7gdWstl\n9VmvtjJj0ZQS86d5YyX+JHAzSWUYLq5MKixQX4xsWVrxvjuMwUMUhvR08mxT\nTZhMZgwChPsu/lxrx+EDw+C2wQjmoxwS4UyLAk3cBM/LNIdIu7+3BoThqylt\nPBtspZPY1nLYuamiRiDVc9BObNwk1t534qJjx1NSrKNLZAFnV5TAeevAinW+\ns5SPcDSej/9hTNIc/EZvfv5bpV5CJW5eddpE9BhQ0/cg6U1SL71+dWWkdkLm\nySBvUZHQJKVcFg/zrQZPjhkAHPbzoprt1Syz/UHBB5ds1X48/x9vGVwSmug8\n3fKnkjvch27Idh/VZ/bxBemL41QPC5hEZHiMjEQ2SW4E3DimekLDxUTGa+oF\nsVfRiWW/sEGCD4lSFCmo/lNRL3WMavfXVBA8mmBypOC0d8rAk/zY4vgHoRad\nc0H9\r\n=7K3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkzMX/VASkBEjDpvj0IqBmj3T6E/mhiJl0C736jzemFAiAGWloLdyiGqDjOxlrBrUgYWIY6RRy/qw7ZxhsrIitLAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.1ac5b9d4.0_1597256830368_0.4642568368609532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.f17f5052.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S84zPMfD6adko4LbvNP7JMbyTk/CeGrD/K+2RxVAxI8ZIIRW3iTJw2S3b5zYyRNs+MV8nF8r2tdnsqHU2rEsPw==","shasum":"574b03ba9ba3e5876d0fb1e79ef71890b43d0063","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTpCRA9TVsSAnZWagAAbR4P/jltXGyJqAkDk/sALCR0\nn38TCeqL+U+q4Nn7ih55v1nmoyMz24ws5x0RW9SGjeKR5PZoaHffLoAuQ6ym\nHKJX0nb/3IZqAAglj8KZBlKokuP+zjDmThaI/LrNw7JLyPZxCpWCOwiZ47NS\ndTtBxNmXj06/Jx/cvNZ/8dTXT1ECggezLCm6ri06DIfSKmr/jqd6p9cReF+i\nIsjkooeXB/xNfydkc/JS6pEahvnrh2oncAD2sTlguV7WxeeT8TtLYQrUN5OE\nz217lqXyw933CfZZIZSgUnn9YU1U9WejrUaXCFfo2P2I9MRet0bQ1nf9i+VY\n2OCqy2aqDy6mlX1UU8ukAvV+5S4i8QwZoJ4Lp0Y65uF1cQiyVIlmZbJpRM71\ngGXqGg7t5Ax0Tm79VwCF1v6VU8uk2OMGzbNzoq/GI2Boj9eTwwH6E52pZZaI\nLWMuH7MpbSm9i6cDW+7JAIaSe2lnioSlSW+ppgRY7VNI1hOPB9k/pM7BkDr4\nx4+ezrXntQL4ALUWjjiCxW130l4a0Vfb5/q53rbTjsK0wsvP/JsVRrerDn+j\nSwjw/tpm+CtmAqtqQdfGNinR6Xil1IN3Z2CQpDozmTlaaQAljjbnIJp6E1Eb\nKyy0oVWbfeBfieam6Agnios7uQhYdtbzzK8DY60+i6SkfmYhHC0In71UntnR\n3dwS\r\n=5Q7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA0+GcOd70IjRN2xmWfBWq8fbv1sU00jI0GbWcFFhYiQIhAJxSAT/8+ZGXqeXKO72SnkmFcoSqBS2zV2P6+ksJcgGm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.f17f5052.0_1597338856689_0.015124009031564745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.80b5d20d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VB8tEvBNPvZUh/pWAoqsUDzL8tMtqNhI0XDS7JRxA07Bs5QiStYmYlNQrTQ4udN41kQYcQIjsJlCHoXaMtp+tA==","shasum":"b76797df5b9b960a4f18b7390d45d656be4cd6c2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":84521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOcCRA9TVsSAnZWagAAjhAP/iK6Pwb00UN16UajSclw\nwyKwFjPN/JjZJg8oRP9wM/Ew8LPT/oS/6zFfG3j9t3s55lMwyqEc2hP2IaGU\nkQ0OzFuEDWVuRUN9wuhS/1+lgVj1x7NnoBCbNMFlPkAyitkMYH5++8q77Tuu\n+RQVHbdJgn+bJ/YHanDXJ2J8wsJh+QTrfjAAymMhjXf6Bg8k8tMu3exHPz7U\npy4XsKEVcGAHjboUEQSoBswvTI2y5ATDwBxK98qzdFoR4pFyjBPwd3D974sb\n/TKh373cprBhCMvElNf5Zyy64btaqixlWvWT4IOd5Vlsr4ysoFNr5d61VeXt\n10VVRyQ5fHArL0H+P8vQlgTXHXwH6r7ZHoozrA+GengKUeBlv6+jo05/T4aF\nLorP7Jc52loRFPGuqbB+cewhUEgeKnOy469kgOm8HVBEJFS+fXuhCSPCz1jV\nP5K52mxS2U4x/51SxuuSxGEhIFTZrVZs5qmi52q7JJpl6UhFIKK8sJRvB99+\nqpTPiB5SL0g2oct0i7xbwuDD5NsL9DULXtzZS71Lqs1JBscYmg6wFW+g/wpA\ntG+WNxWb9rjsq2LaqzoKBqNVaVdQTFhMkkNjiwAZk6jEgs4gGfKczgKpp6xr\nTDYGlchSPOVx3UXbVJi9OSI8/63/2HidqIWBfaDhYxIo4FIiu5DTvDHZtxkW\nanpE\r\n=uFJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1qviYeoNVV+4LuHmdtA7ZkLIRPkTMPQKkyVBQf96vVAiEA1GMia8g+BHXo9vk7/F9Mtga96s8M9tnj6QZ1NAELAGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.80b5d20d.0_1597342619880_0.4815756830175495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.758635ed.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hexJJaK1fJcNClBTcS27qVotstWgBy5LUpPqaOcZ/ElF3NJ6Bm5FRG+g1q1i0L/jfXS5GImOcA/ApO27mbdJIg==","shasum":"38fb2c426cc7c5357ea39d6fa613ec34d078ebed","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":84431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbjCRA9TVsSAnZWagAAM40QAKUQcm7SH7pQxFSnBojT\nMwvtSsUoxL9AIHZYPGmIGvoIGr1SdO9bf+zjlyZy1zgbY9f4shERYFqGh/nj\ntL/IKiJ6D2ArMb/lSYF11iBAXrRFNbuNyk++2LIvRKoGi45/dDD7E7gNrLXn\nrb5FYJPzgxgpWpj7o4e1tU3V4IDt2gAd7AkZ3fSbHBUzZ0srFM5Qx4Anv2ov\nW9F21eh8xSTR/2c67nm70E/uqPuk6+3uNaUHUcGTZ9skVt/R9pYREudXvtUs\nLbxkCbu8lgbuHpQk46Z4FVZR4bOZvWXUAw4j49Js6nMMHGFysJp0IlKQfM2L\nLsr48mxTlwogS2lFxXaa1pFmJa2rHt5r3LkphN9kBXhxaLIkCRAauSGtGfBA\nqWhgp1+Ce+rKzNIbo4mFH+UqLE0t9vSRlMT4ogdSWdo5++PuTSrOPt6zt+ZO\nSvad9FGzIGwwPqAwN90OjT09yA0nGTbg6cAkiAL1vxJaLo+S4boSyHl2Xjf9\nQLnReS9UK0G3wLgqlY+8eOAQbT1fnlJsdVtvawqNyviOaM1zDacaUfWwoP5m\nKejoGAFlnZyMg+ehoUqYjQJXZUeGq+Ze7vpNQwCXcQowJsvIlvOqfL+fLl5G\nggp4RVn56I/I6nxLv5ETuXYlVzEXit5SVSIGAXG/mjPgNPobSwt8oxu6sBYj\nTV3A\r\n=FrcE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBGlCGlLWOaBcDJeG/jdazAwrVr9cIne4KDxxbEKiiogIgOZYo9JGqbJWrzjOaC2QwlLaOddTSh7JL34k7vsDSm44="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.758635ed.0_1597425378680_0.6379065955320757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.18d6b808.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YxWd+6gRMoUEiHo4hxDWHeyi/tcJLm3h/jJAlaE9Bglosbf/uI6w0idJWoHBvlCguZjSv1E+zcdiH3Va8yeXOw==","shasum":"cc078d8221bb27912cf69db43df08c888e508c3b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":84431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlECRA9TVsSAnZWagAATW0P/jYW2vTnxcP+32A9fT2E\nyKXhxkGa4eV/71U597wlG8b+4SH7xT9qKw+ukZpcfjenFEfbC3uqB8jwynlW\nSx6qwqGp866neWQIPtifNhUYpU23zNKq+pbTOpVAbDtCk0YnFj8zpDFs/OK0\nmrzUtu4uxJD+xwz7+ICMPSGmArStGgt8g0HI5LEJDMsOvN6QhR3ZP6CjTSbL\nha5Yan4U9a4SF5OLPqpBuhwQVk1mqVwwwCoDKHgGij8euhrU5ysF6AoKeqRs\n2kvUXGOSmel0KzKM6KYy6UvtTEL7NWEytRF/VwlLA5GQFx8G5tXr+pUGkK5j\nAZnhYc5PID2ar5AuWl9DR1tm/FoDET9riNi6+lAk/cKoyvy1MLnMMMaOKGKc\ndYn+rIGwnK5KdbSwCWtPVhWG05RSu3wBTfNuJL4d3Q7nX7qEplEOeClwUMCL\n01YuzGRt1gwx+HL74nREpUcP0yREaGLTqTc4pKLnRoNkDzWXzNLW+HY8TOXh\nudX9xUEUQuNrbmbifX7a0hOOOYe6M/5eHQ0Puzkhf14iCHgGvBGmZX6kzffy\n9JncLyTdVZDMj1k1sGriGpa+Z5xvplWHxahk/tZwa1JzDbE+iTLz1uj58XUH\n1NwotVWPUZJOPLqA2Mx1s3xXZQ4XUi89oZiAB++udJAJxajknN5GFz4uqXUu\nAnCd\r\n=mo2G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8qHzB35EgrTt5XWByvgMowlURDu+MTId2Cmf37Y0dggIgKjSn+Zd2z4qrwsbkJSBUiyC5FQx1pT+fCvYKiEhCwhk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.18d6b808.0_1597446468270_0.6907219598261152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l0SAyobfhxRzhwTTD437dv8eKUWPLcjvlJjasbsL5ajCPcf3ay5bM2Cl4LMrn/U/owOLd+MLv0XGKW23Jddqpw==","shasum":"fb1e7572d26c8abfcabcf04c245f9df24748f56d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":84431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwFzCRA9TVsSAnZWagAAFHIP/RepaZ2OckC7xYCaChoz\nxaYkOG5IObiznqF2ulxnjljy9NXP5H0h/g5dcnMj0A2h4ptzbPl6hCUJRQ+2\n9yugDfxU9coCWgS+kY7+rw0FTiElzO+xwa4DRfSlkzNspYUv07D03DSb1ifm\neW9/Dv/1hzyqtu7SUxEVxV8T5Lw5EmpSFBJTgmZbP2UMpSRdeYohqw0lSaiZ\nCrtIU4rDn6Yi1Nj64diWiTggluLf/g566nnitfB3Mdvr+ZyQeMbxwHmhOvwa\nj5Q8WWnO+ITfm/lc6Tn/QaRDFSWXTNcdsuAa59cv9dGr9+/tQqis0wuaR0HO\n0gq17CREsw6rvR3V1GUVsM46e3m81daK2Y7VUVqG2XmdMerzMNZxCXnTYDA1\nQaLh0jhbWcYfSNeIFlNaT2nj7Fo94QoBWAW7UctAOqrhwnh6K0rrtHCtluP/\niw+eoXXcTOoVWem4vYlOG43DPZ82mfZxEYNIoeLATKxMHkgAJ5fVugh1Q5DY\n5qX+4Ftaeur1kqPcuxVFD8elM7lL7QHNNIwF5QMFW3z+Oxie3WPrK6OF0n1j\nLbIwgem3dfeHu9ZXPLmmk63itkArWH8V+GAKCYnTd1yGRoNCRChCkOjHuIOs\n5N/yDKxHYVps6YP5neT2oB9a2DfBZaOE0E8DDhwvHuwlj6yxzg2SPliew3ze\nTBZr\r\n=BfN2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAi36aMIsf5w6h3vZD/IHzy26nl/HDqRhmIbqswtExXLAiEA7HbruBE3P27ZMTysKWGJsIG4bGPNPnXbXx/5y6oyV1Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.5f8ffbd1.0_1597702514869_0.49609175958855145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.8604d59e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+R+Hr3cbh+YgeABAAwZZcaD7z0owdIK4byD2YS2TP/GBTcFcoJOAqG9LpRV8WKgat/1bFaOLOm0BzRSBKH5dUA==","shasum":"4bfabedaed678c3a966f24c7f311ffbb05cda239","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyiOCRA9TVsSAnZWagAAUOEQAIcwG6BsI078MJUXfj2e\nEEaGPSsts4h/RJESXxOU0359Wm+0wr1TwSjGRbb2wSQuzzdc8+U6RcMmOKUa\nZJh6RdPSrhf7W6555vPzQcfba8Yo5eN7hlW+aPpBuOwvZgOJW+d/Pu39H+Rn\nGKJWSlLso3MA7tGzXuJLnVNDY2Pxif95N9xpUvO7RH5exoQ+XsSlfAULYDUI\n6DoEkayArsdebMtcYcTpMnikd8Vnx+F1bp79XGcYFbdu5BJF6DaWp/ESzjJr\nG+xpkwO0OQs6rjDU9DD1dlv0tIRn37gQLt1MmGKwwzHZUjDTS2zcFRBaaPCN\nUaGCEPbtFpKCUsZhajiUYFrVl5APq96huKTG9pwD3KBdh673u5WPmi9juRuL\nJG2nCJeSy3EQx1fPHLRG4QUnxkHYAuvJxa5Gvc7cqEur5KdJ1W4g+EMRhF2Z\nJHDPQcMSYblWJLlJUA4aJB0e6CL18rssH17jrXIW+OF3ABIptlUeQVuL8R38\n+lCQCZV9B2lBVMN+sCm/VCVdGpMKjdwuyd++9iYxc0/8MlgLDv9bWhFYnHsx\ndXq1uBGEnRS6x0P7R6tFF6iSzVStAyG7jTKMsclwwt51x44qaYa7L8quKIJA\nW2u9le9uMwH2TreAB6nnlJGFnJaC/Kp3yboLWOwyENgdn75NDoucBbd11TgN\npz23\r\n=Cc0K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHciRlccmzKqgK+DsEnXbu/D9Ip8EF2ddXX3kERl7eNDAiEAhMzXdMIH0ILKjukvGmwb1+vd4e9tre4WiIk4G3lLsCQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.8604d59e.0_1597712525672_0.8654607389298123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-f0F8p8U3lClL1wb6RjS4vAfruwe/nIkMq0D30gNLaVTiDxZjiMZ79sVBkBcxXOTdbUSGePh0VlXOGYmOZX5dQw==","shasum":"a0178b7071d24236ffb48ab8b222e5a7f581eb3e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyoaCRA9TVsSAnZWagAACScP/jceDkujAtyGhQSoRR79\n4V2HCKVAu0XkW++19RHXKwc3u9TX6pO1Yla+FPe0TmrzGsOu0vBQ0C5Fvds6\nk0KUO6KSSIxxYNv/IFpp1xsaK+w8oDjzZLdv/9mc7h/9ZtslAOcQWY7vw/G4\nCAnZilhhMesle3xYYI1ugmbA2fR5fovkXK81ctOjGFKqJRduAe5lc6+K31AD\ngeIV+uFfV71FRrQ9q0qdvNvSR/l3iWjI1r00Ze2Om17ZD4h9LophIAIodj70\nOtdyNWhenD1Wq1b7DO/DAJrLqXdo30sQsEK0zwDnqRUVQlLvyxaD15EP7OEx\nxWnTshNHcMVeLrGBf68PfZ2LyLyZarOo8K1U/w77JII0oHFbxhRVEZEViFZl\ng8Zs5YcIlrd/Bwa1+3Nu0R/EK65AYbjcy+GGp/+J++D1qoAAobBYRjGjhXhx\nQjprXQKhrYNZBv8LQ+D/fmKTmoixi81kWER2HoVqZTZoRse603IQtY5i+jCX\nFHdFzn0o0QlRGsg6l4PNPHqpdnaK48qNm11+/t/cNUus2FPd9Y6zfFSyi5Tb\nqi3uaeTdDknLPuUJUN6IP89/GDgWma9jwHSIHU9E2j8TQ3z4akccMTYk74Vy\ncWyURcaC4TFW2aUWR7Zyn/vnaL+xkIBVZ5yRk2gvJdMicQ2/JtlCXbbLsl4j\nGvVL\r\n=AWGP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA4kuql61yd8hFT/DmKfhVYU5dTTezZxJAU0IcWF1UGQIgSlcjALwVkbfz2R7L5rnVOLZenBIMFy4Ily34hcV6e1E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.1d7d5e34.0_1597712922443_0.27405147053394896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9cc95c07.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YAAjEbryKxTFJPLum0r19MTEa0Hv4klljl4X2ey3fY6uPhwA51002eBzYpfuTJbxajpdbYCFSj/xBoR4AeVXHg==","shasum":"8c16aff37af932880d7ac02f0c253da66fa0c1e0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvlCRA9TVsSAnZWagAAcwEP/2Y9QiUwte8HZ0XjhyCf\n1Mfxmc+Mzojj823o6JEz0YYlr1ZOfdjonZpxZOE7tOQ5yd7LSa9C2MyFiMAR\nwmcOapOQIzdNB9ee2O515aNjeSZ6ol63jiUe1JhdOO1G11cwQbe7VJ49FoeQ\nriIKbWnqqV2kJWrD8s33D6TMUwvbCZZ6t3/5r1gQ+kf4rRWTCl2G9j61raWj\nOOIU/ayIBaEFeDcQ+h9yHmzHoik7s6nQSLxRGHFZ2xjNyfZeMF8F+rvStsN5\nW4jTqVfcMBclfn2VsK7LQNDyHhp9PKcEIEjhfohm/ZYTqgJGNZpgGCM9tdqP\nOjrEmFVVpJHuZb5av+vJxYi09Pbw71MsRyCcc9NJ6RkcBKDIvOFDdrX3jWYk\nB+8ZW1Nj8x+Qe7UB4xY2P8z++lE9ywFQYfWVPG2HBi3ux7epD6aL5WtRPPw5\nuMcQDDCTRrtLgxJJLSg8lH/dF9y1KVsUFhR8YBBusyVVMxfMCycsJUFPQSDH\n0is1fCF4MqtOAoEBi/Rmb2GvcJLKm88bP4XhHJZ7bHUsgvpMQE/avL/xoZvq\n3RK3BGC/tSO4B5BPa8WrSkSJ+QUEenls4uIx/JXrT6s8HusDJY/0aV4Ka9Ij\nEDoUE1VEbdPK+OdNHN+1U7QrYFbQsUzUKRHr3HKsHcbnpXTWg/xKkMLi6xOR\nTjPZ\r\n=VtlU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrd54H6D0U3BxNLX+drm8PuDs3HK+gp1RyatS1aZOysgIhAK9fNwBoQZpXKeSuFWMjlPImSl3keX6CLOOuFUTXEk8h"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9cc95c07.0_1597713381096_0.7274414647770582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9f65ced3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Rp7fEZ09wS1Nd/x15L5a4ZZWm4DEkY+Fddj4FcHkfK9od5FpGvo9sFNeZfDolTHDRYaY7O6TXxksaYpfg62ARg==","shasum":"494a226134f513893793b7b10038326ecda20f19","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDb2CRA9TVsSAnZWagAAE1oP/jTSkmnn4MovJ0f7sPQO\nzDettwA2teOmN+s83BMw0TdP8w+aqD5J7X2qaU7+snBSeCnyoRJ8IFYkYNNm\nztuXJW0qorH8VUdHYSICTKx0CvVf2TPyDiTE7w+DmHofk+NkW0OBNt81p2y3\nBQS8K2GgGWZ+1ZUBjaVgRhIrrxaL259sKVVQ4NyaHBVDffm/VpqMOzUZpyof\nDMsWsQFuTd/gY1HhaKWDqmOfC5tEXX3pwQJNFnAkvIyJqhF/IYiYTim8fu1O\n8LiklrmD9EeXqVs7CDoqVsoL0mBdfgnChnOBFB5RhenA1V7xhQADReLOHxyv\nLg6HEEn/kFFR+1otlb3kf71cghCUH0pf2/jJk1PQxWZ4TL8XRWb2oP1BKRPW\nDH3GKl2skPPZCxEEJv3jmP/2Uj3DSwq4HnFiCcd4nR5PXMN1o6xzzN56o2/1\nH+24L+cUsRRjmGZ/P4tsPj/1wxc9GuL/FUufUKTrE2fXnEgrlwdBaKScy/Ya\ntX00hRDZVlwuKd47KOBWZFrKfPLhx3OJWiismp2639kGinPCDh0MeLI2VHTw\ncD3nkejitf2tHWC25CDG1o/+yEVvs8IZYKf4C+/nyLwlsAds+pS+xrR8UoOY\ngq2srRoHxWktgWtQ7Peksa7SfrQ9qIsr1bPvzvbL4hW4Yb60A4ZsWdPBd+71\nBU2S\r\n=ilyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnzBZ7l/26p1NJwa67qDVkceQQklbgLCDW5Bsm7z1NgAIhALY8CqMOwspcbqRb0Yz4hyBX/a4GfhwzqRB6ZcIjHHdL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9f65ced3.0_1597781749919_0.017405953290343223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.5962b365.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tkF2r1P9XL8/Ozp0JSRfaJcmfMHxFRAFuJ7ix2TFX3K+1WG8rikno9Jk3z0/Vky9XFUzrg3NLVqQ8gmJRh9U3Q==","shasum":"72d796b3de9a98738602215d789bc546cf3da8e3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYtuCRA9TVsSAnZWagAAh80P/j3Ii/h6DCzwzQhOGtos\nVpRUtTq+QcQ6l+tEKflxW/4/ROzR+47JaUU/mhM5iJkeOm7IFigf+7lxpImN\nFMYubV157wkuEzKyYuqqMxl0t2GjTYoEeS/6zh+XcHQ+kwgE7Wk8roZ+S//y\n+08o/rxRhcFMCf/UqDoiT5Xs9pbJDWVdWb5Pt6cuZ1ktwJKraRvSMC9MwHMh\nQ5tqwah3FYhDxkxrmy8UQAOCrIWKzDeiWJpKJOguUfbfcvzWGw+OEUL/krtN\neCCyjiYaxykx/iVGZwR32xtkXj5XEtLqNvmckWDwpfS8PXHpK6+0OJ+5cK68\n+u8J5phsyZNPRRp6Lb1pzP1kZlhsJWgn7SjENsyDt2rmfxYmFm55R55mdU8r\nFOk4MlhW/XICHCvv4ONm9L44a0MOlw9AL5jloZjtZNoba6qz6U8/AhYRPPsp\nXPLCAO3mcGR8SY4c0EPtPaRFU0caxTEcM90y/688epIcuwcGzaG1XFJRHrA/\n1utnCAg8tl1A+cEvsLlb3tgP6eu1W9t2cyGLZTpE/kYLrruUEz/qNr+mqqaa\nRAeX3GCM09k7MymDwjggIESdoQoDqOIw7YTg09m9jg8Yq+6KxfgUFebjB6j3\ngP9tb7ACthaEnwmlQBGMyOW6oWm8n8j4WYh4+EqymsiLlUnwYLsyciaUwpgP\ndXGh\r\n=zslL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHY5YWYI0B/0J62mWu5Mc3cnUZdlX8Cr/f/7KbsP5lsMAiAO+/jFb1GVXjLkzADmz9dydl5gSE+nQS15FEJoorRamA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.5962b365.0_1597868909687_0.7343861065273436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9c9ec756.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6aAxZEqARHt3XpnSUm2QmBn+kNU9wSTxTSUkOnQEam/da7GLK1q/1gQH4HGoRYLKTButMsAkRRDb/MIJJIoxtg==","shasum":"2a56213689e30ae53b7f33e8647c7ec8fcce4fda","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPscpCRA9TVsSAnZWagAAJPYQAJ564p16CfVtTVMoHILi\njVTFcvwGsdFMKUTX0Q33+MtouPXwg4AG7ESDtmFGjE2slKkNw3hqK0Al4qtC\nHWpU6WcRhiWln9rB7aP+TCe/nHR5EYlR6Hyh9zeqCEbsIWuCMFywhhFziMsv\nSqeBBdDKt/bp2pi/JygsQ0hKt5T5GcTiYOq6Gbu9hNALnsII8ROWcHiGvJAq\nTRUC6tZoQv3jjfwXcGTmufOWR+Q2sbgGheIPzX9aC2wfAlvy9driA+jAF9XN\nrIVfzamWZwp7a0r98z17qcxir+Hb7QTD4Zvwloo7pAz96dKkxAqk0+ia9RWd\nACQ6BXNWk4n/KOn6lBvVJjSMxC0rOrW0ENne/EKp8MylQ1pR6o3U3R2wosL/\nudusazLJhhSAQxHqoW8B8NSG6dR9O9LeqD4d4tNclWeN2yNaMls/UvHxDtm8\n4d2vrfROF2s+QZM63JA83SDiPOwOR2xdiPLZ4kH6WNvutU5429VlmD0MBpw4\nC/pTOhuRDVsoo50YyyUG5/WQSysn0kPF+XSn21dKI1NJoPhIX5yr8s2lWU2z\naWxz29ialcicQ+DagzgLveVAAox1teQhF0cwHGwOtLrFuDxqNJKVhGQTcN2K\nNuShtxhQvDyrKUZsfpqlLYDY9T3oKyA8i2CjDD+jHyvKkFIedCop68HHS3h9\ntx2y\r\n=EjLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaWIx1qH0ju2clhX568bx1WseW1GTLjH/tb4SOzE1+DAiEA8+mMynicHFBs08nO+G8K3oRopAfEy18pUyUjwdgJj/k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9c9ec756.0_1597949736589_0.7023168445613235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-te1Z6zNsTCE3uIEszFsDPGK8UYOgGXzrMLXpf9y+RrfZTFIidRamGa8zqOT0jtZioy35v9YEqtIvJlYjfuHeEw==","shasum":"37a01f3a2aee33518e9a6a9a22c3ddeba1c8eecb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5lCRA9TVsSAnZWagAAIwcP/1jqC86peRd1bupZveGD\nA2n/JrD+h2d8eXkr/q97odHf/+P3GuRRwVZ0E+JYPTh+P4K/31fsklX7S5Uc\nQfDAkqUdf3ZCES2hJixb1iLS/gRsLYI8URVssMVbQZ8dwrfz4TX3vwQNT5Gu\nYCQPAlii8UM3ar1puDDxVSjAHefGGgbFQoXRyqQJpOSw2hMHqxsS5WGD0HpC\n5i/17+NDno/Dek27FuA7LTb6mByGBWhpYXU52afbiv/KbeLP3POPEKH7DqcH\n3ZfQ6Sfo3BEdn/Gnkk4YpozAvzCNMVd4OncKFWF91oFUJJDk9mJnpOtneCgd\npU+vs4eawRIIyMGHmblL5XXiQOprtIYkvVmSxm0kholeOOH8obbQuRwkGIsB\nqBTQpmyyJfzaodwNDwT/wNSecGfwRPE9HhxnexYwRz++OBb9M8ruYinqNWw8\nq9F1G8tUU+3W6ArLEZqSVdSGdJL1xCopG1/ueOhpZhLu4Fg1r+ZmODK7hp5P\n17Lr9tp1M+a1bWD1aoq36NQA9ozapjury+tJYImqeT7CsvWaNbyxSd1xuBwR\nN4KxiQnLdZygD1j6wm9KOtiEpiWlQlV0Yj9Dq8M2PiwhrBp2TGVW+52gWLog\nmbtPNSsQcgbLKUrwkjbUDtEy6tvT+peJmUwR0O+/8oM3djqNAEX/6+ruO5Pp\nj4iz\r\n=SlCH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa6hz3tZqOzENkSCZWYTqen4z7F0Ay+P3eosqxsDaEjAIgbDgpNwJAKBTScFwy7cWKGepoRjn6LBT4jxJ5b1MjPBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.fa0ad66a.0_1597955684919_0.2590984228726003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RPl0DeWgIDI8bBT1kNwcJ+u/OCXHz6DuIOFDl1o90RFhiVz59FQlo4VRtIqiBKSDjakRfLFCYDah5MoqEe6vqw==","shasum":"42b70a1e2c69566cfcf31a449c260fca9dd00bab","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuw4CRA9TVsSAnZWagAABpMP/j+Chnag9XXXrU7sZ8st\nHkstdOQNc3YA1xEXam/vMtb/YiZal+a6f97ZlCz3KIcYRkrsS9u1N1jNZ4jo\nWw+C+9Elp/xGTxeths+xeJJt6O+eKw0sSimCeVEtWvQ6/2WFScjufVeVBW0j\n7QMLmHpAzcLCxYxfmlsCcvVOHhrqMqBzBlbAtAWnjG90LcjV+jU5OrbRfjWk\nlpHlgfB++BKzGJ8oFWfBNVEcXUrWU8Ba/XaLvOGXHgULqOq8Wyhi3/+jf3/Z\nkx1ZkZkjqtB3p3HwDOTRWcCSwYzec8kopJzTHiZnTe865X0gs0LWSu6dD7fj\n5sRAFPq4qUPIFm3Bm7ODh7App1dsk4OxjV5B8F8NVGlYoA4Fu6uwHbFn4IMm\nB6mR5cBGq+7bqe61R3KhpWZXFKfB7o/aNPovAD4PjvjalgSnrESEuQStbK8o\n4UbJHA6Jgb81WEEbrL1SFySyNqF+nKMNyE5tI9d1Hhd5IYvzasFMhKGw0PTd\nLSf0f9DwxdTbjmWAE+TqIXudChNtLbiR6X9knmXoAzhMlVSQ0u0vay2n5FY4\nkzbyIt8KJ8LJCBJaVd0QxOLtBNZy2mibYMUXeqDtdBLBJxOTqUf5SCuB8hiT\ntaDc8YfhVS1B/3TI4wXS/nzIQWpcYFuNC5udjgHRuomcm2Nmauv5fSPXMt/d\nl0Nt\r\n=hNTP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCClV+MZ6icoG5nGtMlmU7ruQ7DgU1u5RalMuLgPmPI0AIgd22UdVagWp+FfEREN0ouHzuWRdb3mp/HifNQY8wLbmg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.06ecdd6b.0_1597959224142_0.026137369242587694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.2bca2318.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P9oldAn+hueV/xdz7VoSpSr4spyQgl44Mp93DBNugbSM1xEFHmYRwWDotUMK+CUbOEOAjT+bmaqm3rPU3WVlQg==","shasum":"6fe4e931a47659be1402bf6d2b480a813b267c80","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnJCRA9TVsSAnZWagAA/xAP/RBTG/N6SvCRLWrGj1Mf\nyDVuuJxOYj+xMJ1kJzYnSIOdAh3JLc5AiOnMpRfZVN9KAs2fNRBCpo79gJa9\ngU6LEGe8oau6VxNKeoHCs0xdNdao1f7u4FE4lyul+/mas6xgSvZ4fsySzF0U\nlqptrYeWjhS8W8mFGzX1/bceFeHXKvLvqyU15/8Fh2RmF+8WyAUa1wkn7Gne\n2urI31twSZ2K/jz/yWgEsSSd5g8yw8Yq2rl260IDulvvkofij4XY2i9G+FWF\nPyIU3aj8Lbwrqzkt6i6HwlPdcIC1Dx+q+s27m0KHiuVppTXIopEJDZorHQM4\nY2nYRs03k/v0xeBMqF1fwZ2T7jcAR5MSrMOe9CnrsJmVUfmuUuvqPAd5qqMR\nEL7bd34T4F+v4S1wN8itVXq4OtZiqHA/XWUujkqLXm44jJEL2zd4xX+eZVav\nb8MXdFso3DiGQv2yQCgsB7Pk9V++19u+92DJM6whZAq6dt8B633gDHczExFb\nxDUimUDYi6SD64I9BN2VJdSlvMnfmB40CGszFtz/jd8Sc0T9Ki02zRrtcdnM\nxx77WBfSAwOf9uoiboDsiZ7EOJUFUCscxl47bkbOvlroPALBp/x0c6l++wbK\nUKsJZfl2YTzpYnVhzbY0wadB7ITfqeTXuusbkL58m57DML18oIaSOHKTlgji\nILPY\r\n=+oHB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrz/B1uEt0cvGzVtf2qm85abXOvkq5+E0Sgd2O7S/cigIgDygx2VZuzqDBAEiwFPO3QPNiwbBp3vWzizE8wMDgERE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.2bca2318.0_1598032328859_0.9123932217158703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.6aa47265.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oso+AE7TKurrf2pRmhVNidXOZ2e5Sw0G4s6CBb6bsdaWCDngDzPRVGiJpnVTjFw6KvFOgF4+9xcCYyuI3f+86A==","shasum":"f3d58883fe319d0f0af07a4956512974b6567f57","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9VCRA9TVsSAnZWagAAY8EP/30s1TkdlWnl+CLuv/1R\naf1/UC+X6qVFPIsdQHPpJY4u4iXLdghcs7FATOPsZIdkEEWjDKDDdtHYNOa0\nuY5bgD04rvemYCLQ0Acz2GChrzfHqR1WNRJfdE5bPQYRt50L6JxdU5ui9wed\nM5sFc5ERmnoALhP2m4iYNa+UlFOPUvcLtRrEXpXGc7KbdVY3XzokRtYtAUcO\nr7r0UkxuZ0U2XcV2V+kkDu5QsqWPj1W9MUyTbfow5fNSy/eO7ck1yVhW1jmd\ny0iLi4J93Yw56PTvdflU31XW1VenKAMSJk+x+e5uSFRzzVP9jZyoTR6a8N/t\noL3ehjgoCr6MKw+Mj3dLuG668g+9nSE50FuZfl4tA2wapu6jXnJoYt0vKFXZ\nd9KymTPrIEqcHR9WwwR8TfKTXYvzxPcuWaOmqsQqQJ3adQLdKy6IofV6dyCf\nCCT1LYf5fvcCJSxIGYI+S8gRaHEUXNU919aSfYdBGXrAUtTDK7jQALe/5dSX\nD3Il8bkQawBHME9t7f1PYOVwpF1OIEwMSS14C5yC+yXskNCImXqBTWzJe/nZ\n26J49caqs1x3WRyykxp7F60kPLVq4ssyJBibeF+7evBxC8/wkg0huXR2h3IR\ngNDicg1uqgiEedRJqk6gw4qPIm9i/4DZPPnQwWHES5ccpMEwWF3ZoQq65+fM\nffdD\r\n=a+GU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0JZ7CxmRKL+4HjhZsywBQuayGn2s5wgKwG876WDP34AiBGJpKP7sExHiYNsLWkb6oHPgXAxEXkIh+HpUeU86mzGA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.6aa47265.0_1598033749421_0.04309801433746285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.e7202a07.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Oi+aSHRrv3zXjXOlNpEkg1bhQJjlufS6DSRf6X8ozHLWO4CVC6aHPcYyggNqzZf8Ba+ahae/ESBHv73zRdsYWw==","shasum":"28880ed5deb15ce14b2e982e1e16dfaf5320c58e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8lCRA9TVsSAnZWagAA49wP/1853sinZcQBGlC0IarZ\nA1r4uEoqwpvut0OhnrQxm7PivKQb5zs94LGPwdfd2vaVElVKw4XebpL1VHIZ\nxzf1V8n1NAWflBIIdkUk6Q/XrT5QqjxquUJ6LRdPamkuBN4OlaUUPyF070zH\nYF1g5ZgQznTQhUMJvq4iMda4mA8M7jFFX8B7FA1FrOM2v1sRJKGf0+faJxFO\nnIhTxMSsinVjNz8sw6kQ1B6uYepAky5QFWk4+a2tQ+w8Lf1ho6/HNQEd5/EJ\nrM7TelA7fBUVGxt87WCy2rAzVGf9UpRmIi8LW6YAWvqMfYp39n+/6PMi6OeG\n4ERJw7vYBFi82xk9Ndg5t2n9N+06TXHPuFs4/6pVdiT3P15GjXTMk3EL7nF/\nekXky1898XmXlxJ66oK5EnX78v1f8p36y+tGSyKRZ4GaDvYqFqFKhFUK6nFq\nUn53YeQrnvyslfFM03wJCWFaU/sOA7v9NExPsLUqW1579ZDjhVVIs5FcYxcy\nWOUkwDEuEKwxXrjcuKzXGIihhvmGFD0pAWZBNGgFIhQZB71qBxM0FixPxbQ7\ns4AnCxRe+pJs904oZZix/WFutnBf1mqiLMEpem1TXzBkvGPEkGzaeVjUB9k7\nOjT5cLQxZEQtFhi0R4Jlb94/0kfys+KOl4BZGiFOnukSdS5ymFkFQNAm0FcC\nug8p\r\n=r0Bg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCXbRdjQW4frtUiEa/bhUQLXHmvpG89sSWbsGWJMYKwAiEA/pbk/g5g2WAjZAWiAEq/FSyvhFmDsQnGME1p5zpY0n4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.e7202a07.0_1598037795501_0.13126817416336922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.f208201e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DBkX9uXc9gdcrXgHxp5+8xKKq3lT4EaBFXwR8u1gNQtoK9h93tA96rvuDl7NSPtvPJOFNylZHn/uEpzmvFMbig==","shasum":"4ffc3bb214d7791178f41abe11db262440f73d09","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7gCRA9TVsSAnZWagAABnAP/2PPKAWhm+m6llFAKUbn\n/8c49h0MAV9JvCpa0tAKwqJ08oO/MLsOrC2FbIe2lYl/hNCOp2sLgjVhHUFx\nBdDvR1DAUnMW/gXfvMwcvrEZ0og77XvswWWwacUnohFaQm4XuVcCfe52EzVj\nQia0VfHfMjFR9U+shk0xaX9in98xTiETdod2mD0ZX2eQELfMJWD17fUCPfQ/\nozpZ58TYZPjJEtDEtVVOBT6+ZUiHan388uePenodirfghugZqRYCCXUkbNLs\nYi+7J+ZGGZLLuduiqAz17ldsycJTIj/Z/SjwXuv74l4XqMEBsbhdJeALHQb4\nx+tscmWYy78aDSHQD5DiidY46xfUU3opMvInaG+Ak/OJD9jyEcBsfipgCAet\nS/M2EXY7y1H6wSMrlDlhV+Y9a0d89xBAGuGYtzvPm9lXdrZW7zsMEuK6IcYZ\nm3nbtWz6IsISuj6I1PP+O5OQBF7WLh6sXWvs4L0rl6R/nQ/cIaazhX5resL1\nBWTWH27nEACkkicuI8WooqqSnKWdL1iXA6Zit16zobUy7qn/7OH/syZGvOAQ\nVEo4mGTSuXveTpDhl6kVrSFJJmLacCWWxmqX15QR/HLXKMTin6sjuQEbUJGh\nJD6STrGTYRh+4DfjH9tpSFRpEjiCCb0k8e/3WKK47lGfhkeTbaY0r17ZygDp\n1xGJ\r\n=A5j1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBD6XZa06a0YGmJni+G/OZZOZjKd9W71aL16ZxQI5JQtAiEA1sTjVMYvyJuOa7awISZhr5GXjzU1Hc9hHArQJQah5Qg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.f208201e.0_1598295776195_0.48633975735614476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.14a172db.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rWvXjrxrXvEuBR2/Gd8fxeK0vhXou42SFS1yYBiQpkl8ucqqP+jEyFgjhyo2IDhMeBTAYrc7FhDKFIHSy9hNQg==","shasum":"1282739ff147ae2e543552cd3e2fc586250225e4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrRCRA9TVsSAnZWagAAEl0QAKHEpZJ5qKeyuRcftyTf\na5zs014ZDK2UzkROF20bHOB4Dmqme2f+9DWceK0qkqBHHqVfdkeImWs5tYkH\nC9r+5YukH6aaW8uIZ/Hoau6xHtkBnnP7yGyKchm0rYjuin1X4EeTAriQAxIJ\n1PJKD5ivL11cI5J/IHBn7dPpyj7iXRm4LsWZ136YvaGbKsImglovi+VVfBUd\nroh7ntx4FJIoKSvgA6OfEdiPrNQFkE22NNXmPc61AKnOIPMmoQJruBUCq5JB\nTAyJhqArnJicPJYuOW/1WQKjGXoEkc3Za4Zmcw3BDt3Ac0d4dWK56BcRdtAs\ntkP7WZkyJToSuUrwmsOaAVS1CZQAepjLVwk+1qd3OYBmjU3RqPJHBBk/vifm\nFoCebpgIUbnDY6yxF6J8K6BFFwR+TdJUFRgrugkUttgWqRZKcGpMgKqkf/3a\ntuttz2YpIGzBrNxzy8urueGek1yVmpQU1rZQsuoAAKe7QLekwiBN5AxqinV6\nnrmeWQAUNXNvlpZitV3vfYBgVNHWEwLHYtt+vCzcz3DxwHSYZdEEDehSTutZ\n+Xids6kqNEQ0QP+rqYx3yHUqE9679mZ5SujwioxmAmgW7apauhwDwT248uzK\n9qJwHblb4xDAxqran2pbI9eZkoBYZxcpc4nU7XzE1/qlrAw5CUIxqNkwErFQ\n3qrp\r\n=5Qc1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyDU/WbXoJYnG/TDIfLJmer41RYnlHfhJ5JX22PqHZ6AiAmp4sfV4HHBK+1Kpf/GT1x4CegxtreoIyL1g0Or/pcMg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.14a172db.0_1598384848106_0.24918467580484394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.e6c1038d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V+XRkLldLIkbnZQ54cZ53nPH2k3bkuccx6xIGyLGRVifkvcL4+pi7S8km4IlVX4JXduuQNc/aEFL/x1ObkAc9Q==","shasum":"40c969c04c2fa104bae3c34a0979065490bbb4ff","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtPCRA9TVsSAnZWagAAJbkQAJ3Jy4OspWThHw/dARgU\nPXqwUkfy3u+exM4T5R02FUN4vyfHESvDstu/a5LLXysryZwVcGCx840OKdNS\nNe6eIEw4M8WTKkAT9nj/EHmltcueiPqOMPaeLTVSvzoZOfqQ8z8uXR7iSTLh\n9p7xqnbFaVTYAHvUiu/w5HiQhuBvz26pbmJvsvafmMUiOUcJm8ZEyr/uFGfr\nobuQYuwEhOWExA1yWFFIls+9HXPMMOFF8ZRIOsosMCrelOTkwPf80kn+RKi6\nVhNe3FHcEdKo/PX9q2qNGpipdC5e6t9FrCJmE8Z5uMUCxusdQk16y38991g3\nOeb86f1FHHfFKwRRJT0Tm3vMziIk0yX75to0lonOOeO3jPncAjPKkOO5R5Az\nS4Q178oLWruwyhzIO+SHDC4WNYR3LOuW7+1xpMqKJr5iWHP3GV2QygOGrjGs\nZU4j/FpXv0jWeOV3haAZ1yIwEirggSaTkZnZsC1pg5qsmepyINfBDY4HMyTT\nNADzeaYhO6os9cfM1vlJVyVD62LtCikTdXxgBQK9EirKegFFviFNSBlNhFXB\nSmjY7G70ziR6wfNv2E9gXdsJFhHEjZaZawXvKaxIDy2cnLmFspGTMgIxcPwk\nACN8UXw5d4v43ns6il9lgSEFL6dzrSXuHFYoTU/QN181JqjJwD3p9zIPhvV7\n8gX6\r\n=S7gD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXCBOV1+NsZcThLRppcXnV1JZbS5SW4GjTrtjZV/xdfgIgKRVqWFi1Cmw7zBPBxF3JCWxGzpxO/cn/z/HdRjIKMYk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.e6c1038d.0_1598557007280_0.07443882799814738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.34012082.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9eX9Bso0cr78Qu71SKGjbfHwjRGyP23O+PALa1T6N+ulYw0aM6I02YR+gsRWl1y2umveQ5sBjO7gj7JyyY/oog==","shasum":"5c3bf8d05ed43e379c348f59bf8245073442a524","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3sCRA9TVsSAnZWagAANukP/1M6KKOJi29V2YRHD++H\nQ9kCbXnC/sPvP+pak+x8lNpn1rrpba4c+F1RjaPtwAk4CZCn+vYx16e9Xzye\nesQlQ2nbnfVBZUFmS8VMCoYUifTGlRpimUT2LHmJGlyMW8w6YghOCzVQHBCG\nFyl8aU5KrelNPnt4IKHqX6i8xWGTTNPba50v52D22595PkjG3lLxikHePIl3\nlWtrhjFp4zRM5C5NW72VwPcWbVM/m28RmsJcUIaYInAjtLzc38QQrEzQI48z\nCd6HmeoV5HLMrJPhDDwmT9unBMBwFZ/0FmV/RvgOCFaM25EHg90T5DqUQUeI\nOs/y04eUHz5PSdUBYRn4gbJu/w98W910sqdmnwV79WgjJQkYfmPAeGz68Enp\nLxmmbiFedXhuvsdLFgqYH978gcTz4qdLq1m/0PrfVJI6smXNuQgTfuA/j5eB\npKLjbPzNoAvlzkxdzF5qfshkrVjPqGdOqr07vxOFQ0886TbmMIg4tkmc0SQT\nGqM6S1Zst01+8bZQyBx6eJs9Gt81K0MBBSJtIORHIuahgx790YUAKP803rKI\nlLtytUkiuzu3PIl+p3gDEsVbwO8Kb/65/MNiAZqFrGKP39aF52zpn+t+tWvA\n1jMj4DzEStFUh1tEsp61LgbvBgyqg9Bb4eo/G8HFaSAqv0IGbsaHDKMc1ITm\n4Akn\r\n=5k84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnHrRduWeqmEeFnEj/BKN82dAzWUdtBpNfu9DgTBeWeAiBbJBZqUeu0zOfik9y/KVR9WnRt3uFC2unudngAs1PjgA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.34012082.0_1598557675569_0.7633739380451179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.c073f7b8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BnmYD18fwcbLm+DVAiTbNdLxzdrFNj4BHzKs9L2IaJm90qKdgUQG424xoDA+lp4GUfZsjNxcdy3v4p/0VwGEjA==","shasum":"d3ab3366deb2146e1a07f4c1124b06c93e736910","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":84419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrcCRA9TVsSAnZWagAAtnwQAJ82OkI2vhVleAsXnmuQ\nnmyovw8kM4Ps01muUetA1YKE3cEuB2yTPdGTPXAdO0Cn8onKfbB0HxVNOg7n\nrFPlEmXGzmsR4OzOOjIEep16JxOBA9ftAK4kbRV465/s50OpSF6Pbq20p5+x\nXnK2mpRf0I8YIyuqGP75GFP8D1HoSv0fEEOcTZCAySGOdVdW722FxKZqiqiR\nMsoMyyeDWL3na13UKYNSoB6EI79AV5fBvkEHjpiVH0cndO+J5daxLl0iAOD2\nOHC4uuvDmLFCYIMN7YK/l4XVQYkTDYnGPhozEqHYQ+jgzJ0QrHYi6Hjyz7JJ\n5XhaHrprrQotroDN0gD5wiMlXf5yw1oXm+oKgTUfjxVv4ZPmwHq4T5C9l+sU\ntAKNCKe+LybZ8svuBkrEWls2dzSJtpCn3pDfJDbskR7wdHlAhERfeLkViqXg\nrrTNhugr0lN8wo0L0G48i8NsYqdzlfTEk2oU0WLfXatbXsnXrKvCZaa/KSGT\ng1EAPPhfygA0fIh5oTB73HrrpjpswlJ4nUQNPhyfhMfyu4UsJXU9NZqLu8G1\nDEwDjAnVa8avxRAlVSDNUdfcMc36F7w1Q9ufVKv5owE1HW2qOZv4A7/MCbk7\nvHZqBU791Ht2rLIVwtkniR2Nxw0s1VriGGqK2FoppUsmTDZQ3y9qI04itLB7\neRuZ\r\n=+Z98\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2bAxTv9fSBvrC1cv+uVJ6aTMmn9i51CZcsxce0BVtWAiBRFzAuYgpdXJVSwsgWNDPpEGHdlKGtLrWXD/z5aZrEqg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.c073f7b8.0_1598634716024_0.7922597849697102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V0mK4o6T+qPnnfsdQUWoZ4Eij46TxWZgWE5N4lhXCyiodZaA2mgD+VQplBC9psP/hX8jFQ1NO15bVYOnCIniTg==","shasum":"b1c40129627488278ce422ccc4bb8266be1e1bb4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":66505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7aCRA9TVsSAnZWagAA3tcP/jh7Rc3k09r9/wwDAT0B\nY6nnTcofLIVS+yYNRjBQv4jgoITc3NXl4JhayqorEed9is9UsIKWOYBDUI1V\ngr2pttRlyvlY2i7WbY7I8zcsj+rfal3pIYEMD3J4LxaowhXgNSvim3+TfNPf\nGYBGrhiZAUMOEbUgp489LabSe+jJk8zrgDyfQGCjLYj0sOlIpPDTBceSUFxL\nn9YrIYg8nV1GdNBtvhnnYIglFdTK5cf8NimFvirbmWkianQVLZxJdzlcfrC6\n6EWhTlV43VVpPiJRCi5VQL5k25a722RWEYERTZPunNL94DVuFAdrzmtOKXdY\n7gKK13QSPPY3El+3TSTcF+PBxsPbqwoXMddh29ZffHcUFuUk74StOJgLb0Ku\nRPtRrvk40RYYtvCWnj/GqfSMuLc5DbuxUadgwUK1PCrbBYvHDbTX0J/YUoP7\nV9MFy9ZiDukSOgZo/1y91pRw0UHts+SNfGkUatZEHEigWjySXzA9JbPssyNN\nrhPX8wDBjDiwLL21e8cPqBv9CbS0solUTBrQemngJuq+ov35XXIgzB0/RT6I\njPvMHnNbUqd/CEH5fXXVp1b2OpR7J0xiFiJoWO6r0ysl0AfrJwBX+agPTQeD\nqkF2lHHv41rJin9gZXhAeKK1MLzkuMk25EStyj+eQuyzejlM8QRxyUEyDt5U\nthUm\r\n=j6jR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIEZBoGwaM7Z+G+ldqkrAYQEIcsu5CKojKeXsUZ6+KoAIgdsOgAmrvPXceGe84wg/RU7WycenvBD93wo8wtXZ4Yqw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.b7ae68ff.0_1598664410538_0.0038404519971171336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.697e3879.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-soEcKefuivArcWs/haqFueHKjWKmzrWyAxVOsLio486Fyt7srsGe/NzgfZCacXX4DRQn59oXvNJqks6tPMAsuw==","shasum":"ec0b082512a6ef2096905309936e9b657913af11","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":66505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOFCRA9TVsSAnZWagAAunEP/iIv+vQFZbhTnPRuphRO\ndiwt87Dq94YCFFcK2o4gKeTTvApV5516YWwFiKEnO5Izo49/lCoSP53g52fA\nACrY9TMJXkbZEpC7WlqixrKE0CDWalHy9ltRJrfdiV6gB6MTYVA338rszXKm\nu5mbbdWCDkYlcOyVAwsftySDtMNZu0EyBpZBLi9sypA8kpkVgyH/xXIFjtGy\nJkApBAQaPm5yDCiFSAk2wYwYihmQfAfgkQzRLbdU4o+ZYzLmB3vj+qNHnosy\nreMFnbctURtb2EJ84x+XX2urocOBhgj1navFYOhq5H+35yk0lBaDH10jjXqw\nrb9hnvw9IWUDjhlyc1SqHHCkTeZmgZffO86qYWtWc0ZI4G7FTz9TtIZt2pEv\nTUTXGcg4/bi5GRLBgCMb8e7zQVp3Ut3VIIHWzyb1kIQvLvoF2NeZM5wn77bB\ndm92oPZ+ESj6X2GOn/UR5WpRmXdUPnK3Xs6QZzCuuUt6/g/qzuCDuJeAZ1I+\npRkqdzVYLPb4iBMT46mig0kgM8SAStpNIqqbVQLiIT++0sB/CpCLxlt2ZTca\nwkiWuO1iGFaYDBrCMCUN91gkuQ2x0Tcd1oV26581hnV3z2c6Sb/z9sJjkDS6\nBfNqtaRsMiJlB8MAqm6V5x9rETwZDhHyaA7Nlouvj5/XR2OX0KFv//lTrBrL\nlYU6\r\n=i157\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8yOuQhjDWlXTw/q+bRgtnVxvzp/ermDM7Gu2nv8RfHQIgZuicqoHctseUz+YimfR5ho2i2qEZ4MleLxJKOpFY3DI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.697e3879.0_1599005573360_0.43891850842526803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.eafb7991.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-theme-secondary`                  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/color_018786.png) `#018786` | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/color_fff.png) `white`   | Sets the color of the text in the pin.\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JgBWI2WxkxUdGqg+KzdRtw4EJ9H9A1V6pnCc8BGXqmh1jQ+G3AbD9pEoTeiQZtieOUoJC/a0Xnq80bp/vbwjrg==","shasum":"cfe1a802460a178f0d66908c1f549f6401a454b1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":66505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDYCRA9TVsSAnZWagAAa+0P/Rf3j7V1Mj3XgTGrpzu+\nU/QhM6amMjlbb+Wa8oNNdyU5zESF96m/n1cvaKlaYtk5tB95VTQ9ZiJo1hhZ\nn/ZAb/1Znl0hXOXwxJcMW+qG4/HD/XFDj5KaFAK0Tjufir4kX1MCacBo9kAj\nx3KwHIB6SirB7dXKGxUD2MtVkBVmbqkBWLFUbRzfMipwKOnQyQIOt0fuvoj9\nK3F6DJ96+P07Xf6s+BPHWp9aqliS2AK5sCblvPeseGFXh/XSwRVoZuxmo1Wm\ns1AoqPBtXoAss/wiNfJhAy+MSNYzt3o2CFkm+kXRCroWOKmqUxl9lSBSIeL3\nHny9uc0VlvbapgoaPo+u/KxapdDc9YLoMeM3+bjGeEi+1oBpY49UUsL5kHyd\nyLFJXtXIqOjk+e/EbcMmCPG2/r9GXa9yQcTfxShd6Vmw9+3/xYG3eAToXXf/\nDqr9SX7okPyf48RcMvlLHgMTBJDImHHwNXbxG8WT/MV7TnKol8M4ApuiMMr0\n8iTwoZX4Z8f+DrL/gtbsId8b+CIf7IQ7LvzEF08xC3y2uUljCDRdlxiyNtbO\nSwIjuFhjWiDEFCXkOrYnxPlsuLLmQErMMWGd9GvQFVg8mhDp5hE0FcuatR7U\nQiqwnbur6IrQAb0uzKHDizUThBniwWvYgsMg5qWJ6WLi1Xb4uaVAWIGvqzKc\ndplQ\r\n=VMrA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxzkSIrXcBhQ/q/gUOTY+BUXDilTGdA/uFALf7atrXwAiAUttYz4Px8LDtpXzC3NBEg/xXXS/KmGpTnd5AkAgg0yw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.eafb7991.0_1599013079559_0.5490357448766516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.606642ec.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-L3Z8oXoYnrg97Gss1xugDjfmmtLEy7HBsjrlJ8V6Y1VC5V0sNp8W6YUMLUlGrIwcwRrrEi7MRHheGk9SI0HRgQ==","shasum":"1c97a909a2b3fe9b9e40a32f31076e43d235538d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":66440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAXCRA9TVsSAnZWagAAifQP/jwn8qo+PFm+dLKUr/yc\nevyj6M/9o2rzz4FlA6u9U/1xPajvHO9K/BVJRuez+kLRRyjf2dVYzWmo6SHD\ntCND9WFhMxeVa2YJnSjytX0FNFVLZfLKYYpdHD18NJDfSVDgaZmUcRSXes2S\nWirYrKrQhTeZ8irYBs9EWD6RmsLFeqXPm2n8hgakv5GrQfwtrSyAVwvk/oZ7\nWLLHiDAwlXz70yp0Ez3Fsexu7msO+GQbJC1W06AZrA8XbWTcO2aQjOzo4sIw\neyShWMHNL96U0nq+86YfVbSXV9rcfmhl6BKUVNhHcddL9lSvE4xr1D3Sls0h\na/knnkJ94bStFlJ7omSzBzwpIoiepGV5udyMlgofqMATjLhwdgfLJ3TUkkz9\na6XSB0JTW0dgbD3uprz73uQm0rsA6BnqDrtLLIMMGD0TzH6FsNoOlPLHVGgW\n/cmwKaJrvDS59XI64PP9OvpbWeft8MJfaREdyEDx/MQllYPh325jpFx90blT\n1VSmdnHciiyxfFZe2kDUPP1astU/2/K24wBLkHpQwhuNp+jy50ipn4uY+fbf\nXHsY0YNGcQlcUywdWs+BXx/K9HxBMkKSFZ9ayuR6b8AL9+gqWeMu4k5d6dbz\nIFPwkq0CIcB/NRXjpRB9n90WjjL+mcaspDKbqxAaqPUGgYhjuvprG71HI2Fd\nHaX+\r\n=khvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCarZsGaaG4Xtvi5ZcVpYuMHcJle8IM4gtBOgf9+/7tAiEAqgfFsoHaoQ/XA1cOShf6CFweRhA2vcwtoU5MYo8eH9U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.606642ec.0_1599082518704_0.27641977262391104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.ddf05c42.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l7YMqmDgbHLr9GsP9o8A4oaS5pzBhPkE8S1/zFPeIwPOKlQ5FBNj4T4zRdMF2oiUQodGoHbPSuoODBfslVHyPw==","shasum":"2cea2095d418d35a3de1373d90254927c51e12ce","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPUxCRA9TVsSAnZWagAAM00P/37KCJRbpE/dNGK1hT5x\nmMHOmKuHdiiplNhnptbW8dI+WOhdnEnW+l2ZCItfRAJxWOM0Nmkacrh+Qb6/\nE/xt6xK4KrUi4LyokOHFjmzSCXRo+Yi94OVvyoL120BYEbS+1gJuojSIgK6Z\n6FrX1KYyou1y6Htvc5UiqcrOgup0sxM4XP3ePrmISVpSkJNk2PzTtkq9+2x6\nz/G1KWJJbE+0jrFqU3ksZF7QXyzGkN/Eslc3kVr6HLtECbuzjmw7JVu6Ey0U\nQRR3EyjcTFLjrO2wfbV1Vjiufakn1ezH8J2V2Zaee3xHHrTzsZ4VLgUDOvsZ\nK/ZHYzY5mOftWHceeORz9jsx876rMx4yhaBp3nDaqqIEjD+n7VtVEY9N08VP\ni3hlxbR+LW7QxQwKUin24C6Ska4aPIeh4DD4o3n3EbKirj4G/5YY8UZebY0B\nLray87QV4RTtHBF1AnACQ7XNaDs7FdPkBQ9e65G1XIz12afuf8HCkaKguT3h\nzQCxCra+D6Zb9FrRgabHikUhb3mPvrlSnrqcEoT5er6aZEKATRvfETlZj5q5\ngfzMC+f9PD8u3yx9MDhRonP0htNE2F+PUH/pPifc4R++HdIl3HdKIDufTRuF\nvce/JshmWyJ+h1aPqbfoKy4jGV/SO0FzZy32koxmdcNKQixU7eCli3JTAUHY\nkUMu\r\n=SdW0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoL+W5hBpfXhBw8HzLQ2n2MEWer6UKm5Uv15ELVEDpRgIgIuTbVQk9+wkyKQy32zOepC4Uaczoddm7hAc/FyAv29w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.ddf05c42.0_1599141168999_0.8552705680195531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.b889e6dc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6K/exDsnJhRpFj8aOXbWzI0eN6CAo5xKIYB6f2Ji8ndrRLecnjzAakz5DsIDlF/i6Xe8Nz7ZoIaLA8gE7epW4A==","shasum":"5968f56d70c2534631a77fb018526fa5af15ada6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPlvCRA9TVsSAnZWagAAmLUP/jxXifF/zyD1uKer5UCm\nwHt0Aetsp3Qd7PNKzSfrzQ9Rl/Jc4foo5dch9UD0yB2kWDpkrAUbSkYvov4l\n+ZdmcXIbzp5dZfWIUJIF73s8J4JJ1AZp2jlplOhPlBEuVeTjt14bP6ooyY7f\n0Pn011HSlUodyX4MLrgzYmLKbgXAMakJc1+G685xabaRxyfRQf4iMUbeEz/z\nRHa9/0sHTCR22GZY0TZAVn4GsazqJTdmt25/5zWFZpgivEJCtF6wGJDgBZhj\nDQnFQP1nq5H/tPlrz3L+CxmpOfwQc+ZlHAGsN22eQFafZnI4Y977ESnxCHQB\nziAclM1DJgqDU4tY2qjC0hJkv/2dwyaUTE9vtaaXOymIWxg6i/zDIPE3s/ha\n3pOVFUxLuq1Nb62OrGM4h06vNtsd8U+d0sBLaxoHvqi9lm/FfsPF+bbqJavj\nOjdW5m8Vj3/OzPSHhXn/QcBW770dZnT5tgVDNIAw3+Vlnn8NMi38PHIerlnZ\nvhhil6JOATDUmDJD1Cc0QK0GBQSjFGOUX7nitQGSP0FSZWco5OVW+guoZxPk\n7Y5MbkT1sxuzieQLbAXs9c5OJrWGsIY5n18kTo//AuSVfcX1eSBElGoMuGYr\nUn/6HSj7muvucOPmHTRiEAHdQb5lsAhS5NtSX2fiiWe4OmVVDpRo78HrOQqs\nSuwo\r\n=EdN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvG5892LHZt2YBt7ETdeC2URHRM7GZu2bf3Zw89dSmcAiEA3u0Kn4hmFCefuk8hZaZMSB4DN08QN+P2D6gV2fOy0TE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.b889e6dc.0_1599142254763_0.8178777993350839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.aabeceb0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eYWtV933/BkJVwgEG1Id+R40VtX1+3DM+Z7yAisdonilLeWfs5ppQOcQ0CxwaGEHBqXGZr6ao3dTmMjhV3Y6PQ==","shasum":"326a6a65566f2f3855f598518e3e022ff7e602dc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqbCRA9TVsSAnZWagAAI44QAI+UI1W6acd/eV5bfmex\nmflLb/vYCun1/W2wvh/FsaqS+87V8I7tp4KyKKUohB1Bv9A25vCHrAQbOiqY\nuH03tet2l6WjA1zTlyu3I+7KmnAAa21bxKloXsbV17OtQFbF5136askJNaqr\nxUuzqV9/4iED0WUwomk+wnwpUJpsCAt+ilftBkvanLqg/xe0ybyKZKkhUH6O\npPSKzuDuOZuEfWENvqvtInJhX6mRZ8zVqHTsTOzJmplsfCduS2RF9Kuplwgf\nnaPG2gew238EPXwl9e2RYgMXfrGof/Vmk45cHCXTg8slCvx2blAXd1qTmwCi\neTAlbfkZIJU3bw7hjUEZ1yEWJqY6f6ucw3NE21ARTrONhZrRB7DOKgsQjA6v\nRGq803pGmXNbSNdEPpX9DG/Ar594oWvZ2u/VS5BcjRZ89Vk2B7WHeCTMzHtu\nmPOjPg1Ab0jtRwVji5RyguUkbWcaIUMiexRVguwvODAIiEmSZxWfJ9tuoI4F\nuVUkVZf38FqEREhfqjdeY2b9emftxROIsqZhrYqUPDr6nTK8IfT2K6Zfl5CT\nitzrh301THjoG7yBMSn0gpPjYeSkJFePJDKZ5de4m0FLjjh4R9KufMcbbTFl\nW6keJDU9xu7YKHfEjrQhF4FgAHLeqS/NNqZufbjoJzvrBO66cb2shIJ+260w\nU1C9\r\n=L0Vm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSyQRkpDeeG8VX/RWGJSAYxFRHhps4mFzJggQN5TCPqQIhAKS5nDFkUMzmWelrZCOjaFjrxStEjXIlBYwgbXxyJrYa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.aabeceb0.0_1599163034989_0.21094430421435972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HEAtDOY9jGxcQLGTCbfNQjlRYMrxuulAoC/g7nkos2KGlyzRM8mD3B38fIE94ju38kE0vxjaZ/rxML7acxijQA==","shasum":"22af491f419d2d4415039eeb155f5ce19a2cce17","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCjCRA9TVsSAnZWagAAMFMQAKPzp5j79fEHGxBleARD\nTjNYcdLcQaTM+R+xZJ7H43IPBr3PE9pVs8owokb0UHxA9eD2PdrxSeKnRl21\npwrrwfpEC3qH6zVqJFv7XmMXXORz9wao7a3I290xtaUVpfHtaJGVrSmXBhM5\ncgdC1kzoQCJFxgVcoznRA9GgEYxwwptRZkp+T/eQVDZ9p0LBi/ig7+ZrEfP4\nYQnsxVk5vqgMBJ0vhyZB65Xd9ZDy6+m/WCJ/4FCXNbM6oaNW+P02GjnMOLBV\nvcwTgM7iOIKmrw8x16JLkiLciZML1nrGbUOj2sqyrfEBKhSn5cHLW0sQh0Eq\nwmkhdJjPnSJM7uPYBfzR0glMihLuvOdFUHguFXm/rvJ3Qfv5OAgeBS01ZMxl\n5LPRulPUQhskca7myuXnhOUKyvtymxVS4ZPYl8viMt7Or9KNpNNwvzdHRnVC\nBzw/1iHHuopvltW3o4Kk2PBi/VKXCNBgGA5Fyu7Ep3QFwadM7RkX2WkJvUJK\nR9faROr1UpIFFWnwXmHGyRqMy2W6PO22+4SKfvEzGIgMYEuuBV/iNOUw25zI\nAfY1Cch1qwHX6vAG+uCEm9EAY1LRzvElJRn9ASpQw4A6P798HLVEvn6SEOoL\nt0Sp+lQdU4+4+6mKA0FRBvzzNEZlxbq703q7zpgA4pAPfYq5P+vGLtpy5GDS\nIDvz\r\n=szrs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcQNfJcvr6FM42+KjBSPXNReNU8lQR4U43sudnAGZSyAIhAITOOPbl6YcezeTV6l5iu3ZA30kZZ4m9ND/+gcOHSLzF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.d8cca3a6.0_1599168675076_0.6699248031996263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.26d34b2e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TXdsTIMiN0zhpJOen+ySVlhws8JQ/kTlTVqYp41pgnr6Mm6BPtIMulu1Led73yQZMvWt0OHhW5yt3qhyHvjfKg==","shasum":"ec139729757f28faa17ec647eebb33dcde091785","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaSCRA9TVsSAnZWagAAncQP/37Tvcy86oGOIMeEYBjE\nNQ2d8CLogytOKvOzUImGBWlJvJ1dcvnyl8DLUjOvugLJUXqG12Lp2D0Xg1q9\nMgcD2/brjyJBHL+4rd0RYxR+2FRnk43UoQ0kUocDBZcd43F0YnCC0InmdiUH\n5EGHaVai/OmJ+s54K0xnTRyrVtltpC945gcYP+MZRQ88/rxBIXWQH5Hr5lEV\nZmq+FH8m6Wxrtq+BWSwKuh9MSnYWvlq95OmVvyzEeUI2QGyTAHwbosZvus2Y\n5UuL9yNojwSU/SnmtOwc6egt/xkvoNOIcSS4Fwwu76ypNGQRL5j85l0bLIis\njaFX1i6KDMv2fQ0NDq9BmR0PNRpor+KY8h4TawLH1ATvJuM09oe3TmoB23zl\n0K0E+2XY2Rtzvq5uixHN4J2gkxrZvyRd+uGkAMfsynBgwH5wFH5G2+wuPgmC\ng553CWlUmarCBXG5bYhJVaH7fWXTc7fZy5Y/ELg/OvQwHDaRFK+xyBFQaeJv\njyU1BMwx7H3kULfySF5/MFfMhm4+Lyr7B9THex9XM38qHTBFtZgl3m0PKPG6\n4vERpk6fZuwZgpntN/+XrxkcxwodsZb1htIz/xGK7AMadr3Px04Ljw+aMnds\nPIvNunZFKQmf1gsBV97TEdBpEoQFPGvoX86skFqklM8YYcCf6gLWB6Ny59sr\naT5r\r\n=/WH8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWL0dZtJhJg83Wi5Sq0FqNvLuCgYlcVNNBMwHDwr//5AiBe5Xzte4UgMKHR7mUVsCj52exnhtH5m3PHTH+OmD6V3A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.26d34b2e.0_1599170193608_0.6233527895162592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.a1c44494.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3SnlDkiqyR7uxEIQKAx9H7bFJwYqolY0GxwzfzkPt8jguhnBrPBuW+Rki5DdSmHi5L0rJWz8vZEeVnnXrbKB1A==","shasum":"5b327a5b97bdb09293bac31b9cf5c3724f34b889","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIXCRA9TVsSAnZWagAAkiQP/jYkstgFtCt7lJBTWl17\nC8yX6ysuFCvX3ArCNw3Ho+SDpTVQs2g0t0su1cX0TUb6n+Nkdh709VQMZLMP\nExSsDk856j2pOlZDrXpnx2xbnEYQ+JQjfuYU9syDyTskDFVyh2MAjE5C/m8k\n4njIVeGhLpLnVuHF4RpQx6iAvZ/eHnUpjKt4xPyq5vAivUrs5fTLl7mixkEN\nhuojtw8vSwT4NaIgj9pzZPtKsm3w56Dq3B0fmTLmh37qpVbVMNupnUHPbkfQ\n5xjCyOAsyyq0+vwpk0kJZAc3qaNzxFMecRdR4714xCpl6aBODztLXksheT2U\nTHmoT45KGjIjenPt4Ge3JsUAvWGTXjyMZqcswx0boNLm4xBh+8RkkJOUNT+X\nofPrfCBOkyrT3h/s61SlLn5E9+IQI0ErXsnscxv7E8x1s1UyeGSvrXfE6Yn7\nzqIvEK5wcU+ThTE536MIoVMwfv2nrYwMtD3kVixVhSqFdlnp0a2f16aDGzqF\nj1j/S4SEsD3x+Zz4CAC80N7tmIMfUUu1UVNJoTihf2UYP6r50R59EA8K9AI6\n/4EMuSvjYJIDEbWT5gjNXiaUnKRwpFLEBMMTpHX/9j9UZoluyET4eR7Var80\nT6s0GmdBsXNyp5ioentgmStOaRqpFNSxZ5VquEEaxkiNG21/wP58SQhTTxsr\nCQX+\r\n=YMHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNeXTCZqgoq1lfVxtM9D4hQITIyEWc1pGBGVBPxeIRvQIhALJlHYRLkzW8eeAnQI0zCBCzhxn6CeQdijNdc0/oNe4Z"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.a1c44494.0_1599689238359_0.135858847274394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8lYaXJBKuKAaVWLt6VlHv3NpWRpZuJoMMRpnGuJekjR3bcgtOi1vgqGsGyv1w14SB5w5Hbj/fwVqQZfI04bMPA==","shasum":"9d78ef926767091a713db372b80cebb0e57e9bb5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcMCRA9TVsSAnZWagAAvGQQAKBZq9DxBNghBZHsgkzs\nLCY/Lhp5cM7II7c7gl2yHrDgmgc4kKTUZc5T4WMSyaYND0vV0e2yo0d6c5Hd\n9jlSEaXZa0XPx5kdtA0tCzenVsBFSwtyUGEPBq1LslnqARuvUILzSNGH7F6c\n3t+NcdKVti5N9sN0ok3LoniKjD1z1cBPcmHHqhwj21lPs8mANbycadwLNQzG\nBJUjB9+V0zs1P++A0kd17MZvTvLH2IvzsrFJhqwP8p8LkIRcQD2UQ7fGArTI\n2WWON3yiEyIUThqsGJ8CzMHFBHC/mt0408tSFd0dPApvkfPZujZmzYpfCIi5\ntaig6Wu28cn3JvjdN+VfNWX01zlIb4R+VrwRaItOXU70A7i7mI2gDU2Lo0Hx\nPx5WD0l6RgLPwiUyIGuJl9/iX2UssmyL9OF+D5G8b7ZwtXmPhICiyuwO8S+d\nBT+LEcVgxWShwPs88OExZdnTY1ln7COEoAFT5J9OI7QwNTvsCU4FE2pyonmO\nTdnZgH17lXmD4jYUVJKx73VOSNY2EmMI2NTgeBy3sXWy877m4td+wQPNfqs5\nLKsa/eH7auzUOY87cRqY9PZ3KNSccNfY7N/YGiXKigCT0imN3vJuOBYbMkom\nVtdw+U9+VWuWiUC+1kCZ6WiLg9HAZ9HzaEYn+PPfkOXE0sRKoYOWBCTPoddA\nMCDP\r\n=HuQU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkKecf5kcq1nryDcaBgqIYJKSwVOufAJfBUNxSgKkj0wIhANq69inzT8JeXV3mtM1Ufpk33Dd5xSSUsKm+wL7dPoCO"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.be1cd1e9.0_1599756044432_0.6458827726466481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.f094c0ce.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TRGdy61RM6XhfWFNdyYa1NzS6SDOk+J8rkdDZw5N+MsJUy4FwXBo02MOQ9r4JmMhLw9XiuMFqH5epYhmnZ/65Q==","shasum":"826827a77a23fd830034176dbb5b6cd7e3327125","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmP9CRA9TVsSAnZWagAARgkP/R/WZ7dc4STKx9UlI3rn\noEN1PUZqAkUP+WekTCXhlZIQyb+tLF1mPjR9GDnanowmAy3Hb+cSO+SDUkJ6\n147r4kBEVdF7L0FSwgZFQhtpugYL8jZJQ3hUg92W4VSSZg+NvbtP95a3vjAC\n7gjVulMJTvbNzEZO7Z4ONVB+v+8kQE2uemItLQlw//adq0IRPWzbsU16JKho\nwwISx/E4ZozKWfo9IMUPityomYe2t5oEx7rxRK1e9zfVT++5MdpwwE6y1Rvc\nl5ju9z+KOe5IsEg+wy6oi3B9Y0C2lPFtM8r6KXKkvXsDAOwt5DISqpNDKf9a\nTEnnzkUQ+4ZzpJMlSuo8wi7j42caL7XeNmvZmpf7BoQ7dyzA3aT+4QhLWZJA\nqjPSaxbcIBcyN/GxWe+lk8qnUVar6e09D2qxQJdgVPzz4J5HRk9A3+9z+C8t\nYtK9f0gUiPFRPTSq0uWLMSfjj6gnrr01UL/FrnLbJiOhgKtBN/QZ2qOnCFGH\nYScTHQ5tSXmUXOXnBFdOgZ6yVNT8DhBGxmBXoqyqg5L8B14/o437FpRP69tT\ngZO1VIN30K5Ya5amXBVfCfMSAVke4LaPVQjUyMRtWipI8uzJYISUzx93KmF+\nOy4k9+WEl9TIMKj7tgl+QMGOVt60DsR45Ir0xd6ZXFnPDZttVy+RygbZGPMu\njcry\r\n=iv82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgM+8FYb+Pz63LpY2sj2CpV9L1lXJeiFHt2qlCMYjqcQIhANvDcHFBc2qw0lJhJXg67HBn0r0WF0gZeNpGhO8K4jyS"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.f094c0ce.0_1599759357557_0.7512218322576836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.c1261e7d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oJzTrx7F6ge0YAWteDiCZAQpf5ck0qgfppPU1TP3g+/AlO4jFZTcDgP0xqPjCEzv77zq1wGZwVRPEd8vdt2yPA==","shasum":"ef81c190fcebc27365dde20e3c2b00a92b005d40","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuA5CRA9TVsSAnZWagAAaV4P/RbN27dw55Lqn5ZnfuBv\n/LHh/BKKTMVrmtr/qYK1YzRxk55HTX41tfUT7nTtBU4qixyHLXS4ycDa7BIO\na595WyW9I9I97qgYgKq58dEc4vcYTHOxaEVqWo1aEgujHm2uyAWFgjGon5Yp\npR0qm32HCTUPD/xd6enlC+dXiqydB2sx7FucZ0T+KXzcGGq2Z0wqxm6MaUWR\nZB79V/vzvSGnKLSz5y2G/WiTG+tn4LZKyh6obw+1DRJWRcOo+iCXIryWF6B0\nKnxkjK0CD2QxWO28BtCgFVU9nydeiPMSPJxNGCPr8EGBMuaEe5P6hsJslPYQ\njAWq/7HiaaumR/rxCJl0FzFJMs0SeVohtTlZ7QCdN+1xyzjSsw8vn20SOkKu\neLNKOL307x2DgTv+JmE/CVQ0/6oOSNsmU9o6NFVJ+AOiswBz8NOytjP4t2+5\n5x35KC0JQlxgAK7XjKeVehD/12fWcePBRYHg8MRDprFZ9t5nCfBV3ZyJLrZc\nEee5xXBQPTwGemaZR+e1FZbmgsFAKbJX3lvT8QyJC/5QazWTOWlf51UC4ZKf\n8T55bsYIRc+IRqNoCy/o7laQ1zzwQy972w37PcXBuEheh0G+JLLt/FLEyHFV\nSqoqHeWDxwacvDCUfvYMpCSyEamrBFyHHMwrTc4vlEidZlVzS4IQTGtFqo4K\nQ8Vu\r\n=aWsQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyC/IGZUkNy80pCe3VniSSKN+YnMa/lpWQQ0K4K3EvjQIhAPliquKi2Qmum0gjr6icd/QDimTfdyQJF1oez1zcfLoD"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.c1261e7d.0_1599791161133_0.11132479819682817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PuY9ArAJXrg0J72Ui2kno5OlnGuhkBbzlSWs7whP6+9IzsErMqG5aADsqcIqk0RB7/NN7R6eQEqWV5XsiFfdVQ==","shasum":"f7020ba4265e53e1f29b7b13b9e456f6829d3582","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBwCRA9TVsSAnZWagAA+l8QAJlKMyl15SHN+xRcG9MH\nsU23BnY4lGq2jxAhcuNcmIUOBFILDAwqO+YTaoMSJIWZsVbk9xIDL94Om5Y5\nj8UgmpVm7kbPHFDMIKf6F9Dq61K1uEcgi6OBF5iIFvRVnXBYg7Lzmq0tjhGI\nAwLoNzHXW/p0wZIMlHvElfRlJudwlOVC5nPrebxrIsoVgqx4Pv5q4RCJ6nk/\n3KcDPT6monJ0zS6q8vhisVhoqW+s2uBCFuOr4Nw0H5aKe42DH85EMI9LoDgA\nia/JnZ7ZVOOaA+4EM7k4Penlol3TZd8OIUQaJAotB9e2SCZfatVF42CA4uJ6\nOErr185LpYpyqnYSKj9ZkY0P9t92WM/jFWwRAfTZV0U+v+Trc8ON0G1ahVd6\nJkF/AlU8unVJuoPPQBnZoH0OMjYne0PyUG8tc1Xjh14nsJs7BPIsFRifpUVy\n781cvI3Os38jAtiZQWaTrup6m/c71Pn8a2eh1JzwKgxmukLL0WES9vLjOVBz\nIeP972hvEBZcd4IgsCy3Esq/3QWn6ERPo8/HzzkhoS9qSBwyyZLfRERnD5UR\nodAMY7d9IPvprcprK4krohaDco5sJqgvtomDnbMr7FBaUZzTkqda28UQ1vLe\nlRkaOJDa4k+5uwU+5euKYwB2/zVDFOWilW+mMTpIrT1YYAf5Dj0L69HSxZ86\nQ+Os\r\n=Sx89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2yHR5ez5j2JL0LHynn6Exj+EfRyYiJgrqYkJQCFzhYAiEA8LV6MJkrFfIUgjwTa3U1XLE8FFINRHHlQVJWvPJNcw4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9b39ed1e.0_1599791215604_0.13704575232512406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.e67214b3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IEPbV1xxwykzTDoaAKt+kOk9Z3n1W/RzQiuk9eJVK+dicv3XHV3JpS5m0eSc2qpQOtyfli8/QvQ0FJcxLZQ10w==","shasum":"e90e11fcb14add84b65fc6630836ed300a2353db","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuFzCRA9TVsSAnZWagAAuIMP/ihWQTkSCvam5A3r8Ewn\nFxeVGZuq8HqGjOhdNF1zcWBsGVGh2K/uTra/R63qGDhNNFvyKrKuX5s+Naow\nz8as72/M2gfIyLtgchCun1g8UH7rjhIJ4RvDM57mK2zIbe8UnZ3gO4DZeyRY\npdEjKk7xUmwQXd1S2vyWXO8JodDoy1sw+UvRlh/1XP3LftL+p+hn27nCTdcO\nRPN75lbvx81OUTeRtSTNYV7UVNKBRcfDMXgnpO34EPPmKOayha0wlKNX1IPx\nVM5Mb8Rg4CJzqzoX/LBKoC61dlOyGAzjrxUcoW81ASbOVFY3Fr0JcEXbNkiO\n6vVs8j2L1grz60oMpCJbrr5g5Tx0HLsgynih/n9fZ2w2leGW0A+MyA8Yfe2E\nVaI5Tkh0P15TgU/UleInH3YvrcW+3NA6zS92XaSjH+asHlaRZTpt30reOK51\n68Jsc91vEaC9sPvPUNVsIOj8DX2HVcytV1LrFNfg3Ad3OFvtMaj+cKDGLWBe\njcZwvWuwHiG+BjiZle7ocg8bBKgxbjigxu345/BsTx9JK/dKylDMwx+rSlf3\nJlrYsQCibvHaN55vvrROUwwl14RumSwYQOPt+5Nkp5gr8rGh/KVg7A8LDetz\n3frmNo+HiAtB+ZbfY4dXnZUUU/J40pcfFt0ndVRaHndvHZCvIdC2y1ZloDrB\n8oVF\r\n=bCOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+p26afQvxV9fZMz4B93ZmzB31OV06iZZWXyKl/FOZJAiBjsUsGe9rVKrChrdqRqylUWPEmjuTwfQouLt4POWpLlg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.e67214b3.0_1599791475061_0.9395708335254638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.36f5da28.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pLSImU7fhtXm74Z6VZ793HwJpDH2eha/VYOxQktXG4LBfAOon5R2dHvoOuK/2Qgqd/iyHLaDk3auc0bYVemV5w==","shasum":"8a5aa7c6d4a49ced43c9d37ff76143a0fae23c7d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIUCRA9TVsSAnZWagAAqsUQAISy9TIDtTrB4X5Zis9W\nHlZeijE5+MGJkYi8CEDTDjsD+ArhRqkit8khn+0eXyOirQd/GRxbDv92B7gp\nXfdRPHeH5FN1eSToWtIBdNYXNPyuu2HvTcS7MmAT7WzIohYSDu+rPooY3rKv\nOg0DS514h4LxMAdV3FRXACHJ5OCrs8vvDyczaUfHAN2WSwH+lrTLmMvIaBrf\nedoIFknpsKQ/V6gIOmbXZM52KXxTOSrJtCNeHIyhrOi3FOcgswBnKBRSWQkc\nUCGmo2WvDax06489BD6nLdUFapXzbBBM2aWqBYQrZ1F9qASQEgr74x95q5Xf\nwyCZw15BotHxuD5H6/2bWZ1kzJhsKtaySYkU4E5HQAql7y9sOCK0Ky8Rf58s\nHelywQ42GLpem37bj5ZZ2ZZ7H+8nYEMDBbXd9IajMiFj/tr2UCW2EAciKrrH\nrLJm1Z0KndIG95TU9HMGWg5cPvgMl2m5c8h68OuPNJRAoNoxwA/NeXeYWfZN\nQ9guhG1U2M858iijBDnlSCptmOlj2q2f+1NKR0ErHHDfZGSJflSLG4bWZPB+\n4VLhM/yUYHVoYvt0Nl8VYZ6vAgv8Fk9s6OpzqBzBxuhAw80JOqhexfUBXazJ\nMagu/AL3X3JrM1ghE88iWgoNydL5+bMRgBLVHG81Mqht3znMArU1aq3H8PsA\nuhD/\r\n=sBD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyOuWVE+4XTyPMTEl6qmqowxSVHVlI7TVYD7V1yBHj4AIhAPeWpbaMf9veO8dICawN90V7F50Jtytij9fbhphG8fnX"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.36f5da28.0_1599791635941_0.5183443970022528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.3babab12.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-h35H+YGRJtzfF8+PKIcX84hqo0bYWOpgCM7gZ3fvXtBms0HLInKil7XjBlPi2zte4hD5MI6/Lkx4g2RXr6dwkw==","shasum":"17a73ed8fbaaaf66483833deca872929525cc5d6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuK+CRA9TVsSAnZWagAAzosP/jzrrHHEXyOFmxJl2roi\nBJTyYKzaRjN9W84VM0UYWdYbRnv+y11g7ubDyb1vIgak45HgTSs2fL5jL5ZY\niO8/4tm8vFkBM76uM8WHrSPj/chNec/Ogc2/UQIUCguBmLlqiRvT7MIlZSWN\nxBqO6kw+ElP+fuVN01Ii4eCv5Z3cgdikltMxRED3J8Ex5Es4KxzThTzUROmI\nX4HPfsg/inCl3N2oJlQK0X1faHOjcQRkN4WUT6PXIiTyRerzANC2GRTxQ/Fj\ncdINx+dUqi+AxN5Ud3JP+4j94RSXdr8pcuh9RaymOQlKwjqF9AtLvhR/JqIz\nAuJ7GFILdjbaujsovpTb6DxzVsAOzkYeiX18rTO/Ps7YIT1lCjGt+V5puFii\nwI0WlgQw4BmUb4r19PcJdvgv39Q9Yzdcg6nfaxayc2EP72nd+Dz+Rj7muPjd\n1zU00eunf9A+lD4K+36lvba8NnReE9booFoR49sc0WUe1qh+l6fwqsfHVXFM\nfBOpOJwyAbuRfByvTfrrc3rnyBz/R1YlA20q+NKAE89QskRQUey4X+LbynkU\n50SoFxPamsZABCNfWfWVCiiv7adY+/wiFvLDO3RJ82Z2egZumDqLaElZCapR\nUZyl629esrYQ3mKAMxeBBniNsIW1UrahcRiiHouNYNmYUMFTIHTb/gMsBeUO\nSKkc\r\n=8rkj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2HB4n1nMzo+BMyC3bWx71mVK0rvVpBquO+IR4RT8YPAiEA6CQkmq894ChSaVf7MtiOS5hGe943B3WLI5r/sJ+6D8w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.3babab12.0_1599791806559_0.563397275110058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.a4481e6f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3oMhRRG45Cl5BSYiR3JvnXIi8RxtCnDsRgWfpqEJ+RQzySXMa0sLbqtxvfR+H4AaeNnHL9SPY/sMfmXvFxIDhQ==","shasum":"5ba4781b99c80d6ad597decc9eaa12515bb0e600","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWbCRA9TVsSAnZWagAAIXUP/0OorOmn+j/b177RrB5V\n64gvQPvPJexEUSK2mrHNVDRSCVMBFhAC9pyBa+M09QV1/ZewGztU1hTLdMxI\nfP+/cvebGwVqNZuBFiWHeWJo2KRbrafc+ncS1ck5ZXJJX9ZVhpShPQP09G1c\nin3j9RnPUPLvmIgF96NDpOLyviWBA94zH4c+/H0tcG+xuYa5SmLnxiBpU00F\nk9zqdl1MRTw+XlqXUUJ4wYRR29qxo9t0lPyiSgN+C/IlAx7ZRM5esCKNANkP\nXScwf6jeW/omniVfGq5Y+8mdQP2TtRM6aD/SdNmqCYfcnhbkLShqFDhFaXrW\nRRW+AIEFllwWddD26khcrbp+vKQSXx/sxPRd1QwcxCBiAKtOu/npXZONwioH\nfIZDB8ACmkCksKtpeV0V2ZVBe6ZtNvXzMPbx90LiyzqakZ8jCfEtnQJqyaYC\nD6EjdCj977lOo101yomyLgHGqxqjVAtMRW0y3qaurZA9LUdtNurK0gJMkmr+\nzI291st9Twq5mFvoQIvRPi4sVwWeG+PKUNbKz03MP2uphZqDkQbY4qfgtLz9\n47lshiVTN/wtRu1mTtOtlNiD/hNIFB0uGiEACkD34wnHWWzijJqi+idfS0qA\nrSAHOPW6mDdvrkff+5gegnmagj/IuVIT0tCpVgQ83OzZaLy7bAmj79VY0jkx\n0szR\r\n=yXnJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOLvP5djeN1FJGuwL7IDwFpgcQt8mo8euS1ot5SYztFAiBsa2ZyNi4LyoOYyYC2zhY3EdpQ1j7jaWNSNW4c70xMqA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.a4481e6f.0_1599792538878_0.2208303599036756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.a9177836.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i/ZmDoFvTbBOTwc4sG+4tfsLb52cdOE2Gi5JqpgowpibNSwSU2zh/jddylui7ABnQfVHQOb72t1RbopDitW1PA==","shasum":"3ac51de6dbd079ea49d104df6992271a4a663f11","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7ggCRA9TVsSAnZWagAAa/oP/1fM0amZwZdlE+9/sRwn\nxU8U5/uKDtAVPGFNk6UAmVkFV8NwwdmFn+Ffv+NhHyMAAlTuOGRpvTjry91a\n02QU8Mrg/DfRGVMsXXAUHfYeG0pBvyx7cMQGskiW5UR6dpLveaPVn9OlRiiK\nCCkwr4k/BTPjnKAaH3cnDejuxufGbkjLJ4RDzCUs0Kr0ZdqHq2NTa3B7+ntv\nV07UnjOp8xgw041XPzKdBGxNgBN1XG99VMiryzPUhtmaCVAyapkExDibd+KK\nlyt53jw5PaXvoPO7F/Xwk5P90+ddP4CoBVdkSxhtKVN0RTYzOIwDWkh6Mpkc\n0G3MJSYJ/O97OIiVkoTIMxf9PlOd31TN7Vtk/oXVsbPdJe3QBHZH6owjEjg7\nRpsBIKp41W7H8v1ZE7YjgupmLZ37+dlYy/7LlGcqUOoPGcjrHrpaOQmLc/fI\nPsAa2WeRKiIoCkBZXsb1db1W4EucPXneXvTZhsnfu8CNSnOWsZPPVLDBjXBo\nYosANbPJzjaKlgpD2rdbmOwFYVFMtuh7WPgrdX8P9jmhkdXB/wO4FNiQIIPh\ncRt65oSsMim77FHKrVm6NpxasLzhT5gA1ZDsvvqYD4jIckR6Yn9FmiJINaBc\nVp/pOGCxgLbTlwQP233iUc7rbL4NHmmO1o2qW3QbQJZSazJ3KCouoegGPBU6\nWnjX\r\n=g2KM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6OElYQgC0frlZbLc/14a187ycigVhXecINRQ95Fg3vAiEA9zPGEMfb9Y2sAMRQ1XR8ggwkdToUNX22ZQ4rh+hJaNA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.a9177836.0_1599846432021_0.429477941899036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.b102a3c8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0rsDpLAmUKfeqcNrHSj5/3IHQytjDXUKPmoR+AiNssGhY2m8OYWJbTyO/yH7cLVRR2AUOW/nt0E1K/xVTLDk5g==","shasum":"88e66cc9560bea849f3999c8b0b4b7519145a5e6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87PCRA9TVsSAnZWagAANV0QAIz1r3vSh6iXkwH+U1Mv\nmjmNqclXesWuz6zgZJhOXyaP1DPVJiUccik8fJx74V0wD/dhtX71S8f39Xd/\ncgRU0Q2BrrwBV6qwyNj9oqvrVWHjWHRaeajsiLai0gVNZJj1k0koL9ylXMcd\nUsmPR02M6WIAAM059bwaK1aVSjERyrOn3rHA3tiZF8Uope1eik0pLFbwd9IE\noHMUpNp+ieF0O5W3teFLlZfuC+QPhjb1Pdmj2s0ncL/1fq08W9fZox70pn7Z\n+X58AxoDo8vVxgzpenr9l2auIdOQKqDnkqQ/Ku4vNeZA2uUeh3h15a78ppDo\nwQEsmQ3xQHMzOyLjMAxOHMDiCXU4peFlwZqNJQTcRmlvjXqQcDohgX2clpff\n/48c+TvoXFV11i5xsKrUGyV0b1/owRuyflZdShaC0+LlivJDrbRCtZNSZPo6\n+WplT1vBcLyeO1M5bf/cId4e97i4Di9x2UXI+wOLPEm51pDWacRukODJ9nLo\nBISmr7zVDF0LwHQSyCY2lVFXXN2QcdU9ADYr4sILHLrPXW8zcJV+rYN+zo/F\nd1FtcngfIWYMOUt49ABuZlfTsMdUM0qQxEwDBVVIQYGy3kWtKzDXXQzlzUDF\nBUlW3o+rLsxuMwZGW2zYPuUCDCAwTgMVO5B9o0R1d2Mjv5k2z/MwETNhLdol\nGOxH\r\n=+mav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzg/F2/MMbv1K33rFMDZ6CZIcDCldDkKxdb2mfQxNZuQIhAPCdayQXxqRJBA+uSjoDDgUw4Gy+4ZPdQWQNLr8Fj8+j"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.b102a3c8.0_1600114383478_0.5828839718415129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.a7fbc707.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-syJFWSfwVaLCNscSoSlOrtdXnymT6mxD/kGjhGij+RSSdmCVq089yd+YrNG3yUNqfdQ+8t8UJJMhbdUyBcdzGA==","shasum":"fbe14c457a51d67738daafd0c6c8a3532c4d9db4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOY4CRA9TVsSAnZWagAAl0cP/RH6TB0O3aWEWJdQf/2F\ncnY+RKlGqycGcoY+dd3mW43OcD212Cg8B/3ZjOaYxR+Z4HmFvDGLMyEijqCA\nciBhqBGorqbZYcSMrYYTEPelK+ukJHYwodwUPkk4juarYD0/+KhAudY6qw3X\n8s0x9ethr7IGpRmpF/fJXqFeEikJZNIt1jCN+f6kuI/jhQ5qKRhINWtjH9tP\nCO5qQBtNQkHqHzLjJAp59SFx/wSJ/w5vm783JSbJE2JXcts+PFNqByYQ5gJN\n6SqZK8jdvwTqFZnWZ6Q/DEj6dR0uohNCRo2y16AOEY+Rbqg3mAI4ZRbVVnCC\nC+2QThs1Fik7PmG/6kfKiKANrg+86Pda95c3RgNAOjPLqhUTV+/LmbFTbW7I\nAF2cE2ltyBNXc+Ofc3EL+stMQk0E6OOheZLnqx4hkmTE7AhS387yqorG4ZDR\nwNZEjRg94PwWZJ6TwoymLXMJYp+bVQNSW7wRhB25H4KQbXKQGyOD2LqVx78K\nafyD9VUPg68fX88EF+yfVjTm4DkSBwx0mscQ/TIvAeUraIwJAB/HDyuEceJX\nFRYE35pfO12O7/70kwU6Y+1EkwRrwNgMxwkcnKAT06rznCskH8qIgZmuP7Av\ntG81vFO27NV5XEHGYNjJj93eKceGTrvVovk7zu1s2Klj0rHkgshQxcRy5cK8\n4c6v\r\n=LPfb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfJuD0p9wHJU5rUUeGkYrM6Dpe1cotDyxyF3eXmGy8ZwIhAIC1LcQFwtMKe91NwJk6jb0lEkUbxeWZGDnrFhFx7FWs"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.a7fbc707.0_1600185911598_0.5330458715562234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.ed6b8660.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZyxyTFoj4QxQqz5kDcFHk/LC3OxhYh7cZzMEIvx2eLdF8I+FMsINpdFwG8bYTKKn8A5AOPisACDKmKiuGxKk4w==","shasum":"d575db571e8c0339c6d85df98fb3cd237badc14c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjRCRA9TVsSAnZWagAA7aMP/1qDwvUGfv4PtxVjBWY9\nTVXK6XbMB32aI9bOn1GhIvdTIyIbulYoqYBKDYOw3VQ5n+7QfVvl6pPnXkqX\n+yZmn+UmpJFSfUBfeX91ExjxZAGepSi2fuivUvKGBbhLNlbgtg6myCIW+wkI\n1frkah26LICMSZfPXONphbFOHUAzb5RQ9OqDFXcTFcBa/cPEHQXOEAaWmTEM\nH+6DALq06D/ASsoAGkygLj4QdvF5rNxX0vClIS1WXkSqNk9ZPZYIWRh7yCyy\nCXDnq4EmPDrlSwlnXM2O3JGVo/76uP8gQHWfF2c4WZqTEhSNqDlLJMDyQQeW\nW4KwZXlhH3C8KHktungskbrqH3vnivbQp5j7ustpIEby7Sa+UuGB3wMaDmMm\nIPN0Wws4RaMwqeg8mbmwBSE/Hymun9iAXqsaTgE7TYeE6BnyCcpYWfE+WStv\nUCK9oL7NnyKdvbdr0Riyh4EvBrYn2jjFuUU9LarNHTFIZ8k4RUdO5oyQ0orE\ng3lOz5MaCNXTdcYsWtmGyfc4hDuRlUGTRaiHz7ppkgE0nOV72Or6gZZyn4Dw\npo+kzxA9ho3PFMKYe9sAFFSyzPKb6zR2/zYaNobbwYBo+tyGBYkuMHZScm7M\ntuQutCQMcGVDcvuMcvPeKEu2Kjq+iEBdaGKE1KnAf/OCqiZgMLkGHBtAaxh3\n1y4X\r\n=WxIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7V0PiyYbNTQwdSKwhBCREVFdkQJQ0d/AetLUFXj58rwIgayFXXFE8wbWxmfjBYrsPoD0E2bm+gx3BHsUMclCxcys="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.ed6b8660.0_1600190672741_0.9546652639676327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9c2331f5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/5G5o5W+59aKKaGkiBd7CE220ak8T5KV/Kuv+T4LB6xNCXsfCb+1W/naD3CG0TkfQzGhPZztq8k9Ry35hQbCSQ==","shasum":"d0b7a89d16d59041bc6b7850aa3743b4161ca829","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6MCRA9TVsSAnZWagAAOLIP/ReHsSH7hUa49pCdG7Px\n96ANcliFXstXMhw8lYoZm2IZ48VbcPL3SPbk1mHdz0GOdTXgHR2JpEc4H3LR\nOhX2sJyMg/uKykp0rP3YRLm0q038fPOxy4+QUBEn0br9LsknT1jUDF9FDuqZ\n1j8iQ6JJUNYKp0QrU60ohIaSMvP1nvuF4+bfIt8EA6Ox5L+SMOzvhmEq/8ds\nXQgDwGfT8SIH9rc4D/N51l+frlRbssmMlK39x55eCsSZa4zhGqhQ6RTMwRoG\n4zt1Ne30XvgGRLnGdtyVnVEf/lhIuz/2/1ivAkcZ9IT6QyFUVSRG2tLDA2Kn\nmpITns9fb11zdXuiuArnFrDNNwhauFzArxo1PvWsQkifTdNoXZHWdWqPcHTu\ntN9jmsglWaCqS4NhZze9sEV05M6pTvG4AvQ6bwVNm99STctOPELFh6QYmVZf\nhsOmbTG7lgOVudt1M9yWBpQJ1zMKJXtCCPUBYfNg8dPc3eBolOcFBsDYt8Rc\nivKL/Y1OTbIckke7EdIwyIl2kQKFXd6+K7/HAGGXMgE96XRSLyUlIaKfOWk4\n/IfhhS1cl4L0b25zrSR4As4/N80TtCBRvgx6HnxL9u1/bjg4jB0iAWpLWlP+\n3tC8h9g3bcduwLWIYhfM0IO1wyYpv0K4ZWTEj+3ZOmp4+ymF8j29Yeb1f2xt\nglU7\r\n=Fk0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChRFiuxX+h6jpQ4ggqqszAW9V21WNY1WFKaJ/ZxcQw/AIhALjHX+C2I5IWoAkJQlfmmqGpDN5VE2MZWGd5/MUF+Y8r"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9c2331f5.0_1600192139730_0.8884437790161861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.63a5f088.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tJnrSU+vHoFRhi8n5cKiAA1dczlbxeJvQ20+BB1uEL0h/fkE5MEGGVJowJqxScm3fWRq5DmgC52ii4W+9b3tiA==","shasum":"35b63582a940b24b07bfad95693c68e5f75d6b63","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWaCRA9TVsSAnZWagAAdI8P/RSyHnCrqd1nEko5uMjw\nQvPMwVcfB/INdYi3Ld6CREQeADDpqsO/yde9keM4JIBvbdU20i2NTpVhPsGU\nOs60MhuO9jYHYaWxTrcnR6qQbQyvhPZyozbll9o1tBJNxQYHq0SzNEEjfTtG\nR2gQwRSCScoCfD+YauvJWL00QT0xGvnDnCUAgfYTvv4GLUmh95L7ue+RV0Z+\nsMHuj6EK1oF06TvxudUg/f2FGJIGMHlwObH+t6abwbnu4ydq+UFm+HDMndms\n5rV59FK2L/nLlNMezlwjhz0JkN/5Tk5Z5i3TZJ5hZyyHwEFnkdra8+ODe+4J\n1+JyGwtAMK5UavpJgn7RJzUh7Dypf804U3BKi1yUa8JlVnQ5sNSGuGkmBa7z\nmdrXg9fp/uUGsPyjstoZdyaYxdh4ibK+yPnAZ2/8QQ8fnuDhHwdbmMmt3e4s\nL7ZVqdC2D6q7x2M0ZIeLwv3EBMxS8pQxDYiztRE7arTHVRn5eU3qOxckbiY0\nrNze51A0C1//cYHrIJHvo5VnagXjvc+Z/dOdMjb2s20qniosKZUVG8ESY5Ao\nd0amGUvw+f+BWU8N71KvQZ7rUuIVTDMICDpdfkAx00CZtUtovaiH2pgwFhyz\n0aS58nVOqwhaKBA2iH81Bm94VI4a4I56W5rhH4Meba2jIqpY9zpF4RLhN3Dq\nfEFX\r\n=FWoQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdlSb6kkUENJMGoCbPEbMHWiTlggBlVJNjrcD/IFIyMAiEAyZeozykz2y9PBTa6WGWNyP8ZOTH82zFG94M5khKFgNs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.63a5f088.0_1600292249602_0.7576792145065776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.b7995e49.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Uv4S5Oyf/6LHOSxURVZ6xpMdSFColRJ/lfDx+CtpJLNL2jnfHT8UJhbnIIkPC3MzJ3TCYYONxVrvW+JiMkkN8w==","shasum":"930f23221168ac547a31c275ad6785c46b4c6a5a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8XCRA9TVsSAnZWagAAelgP/jECI/KfSDsGusIencf9\n3XcwAJusiEZBhtw2f8bMgJRgcPglx/QPG4QXPaV2pek58Jk2Am0OSxMtgcIN\nVGFQL8Kr0zObAiRdIu1a+zdmXwu94fg0NjabeOaBT2nMV+IlV6igMp78EM2f\nXRn4oOzU9ciwP5uoju35/Oi0Avdnka4yDweUQnFU/J5bsTVZjO/r9ndRH+zC\n+Y0Xha4XO+KD3NLiTXRcE+sQPQ5Fi5lf6Y5v0g8pVhB5nkC2pyN+WvYPRJMj\nC/5zuNAJOP4G00Z2v9PB/7HHAF2HPF3m9m3DTftM3Abd0W7v4p6CHuZouNKv\naoYUb58iA15b03vIuogPybWo/pvPLQTSLEnt4dHYFTR3agTZVR/iFoq19JUA\n4MJj2Slg2XaJLp9iFUWeDH8oEppwT99JmHwIsZ/ixdam7rFmgXoAvvGluAY9\nG/wHlRP0dEroEzD9uLG4Mezttg1NPsUJJi3I6eeIF1eewLLXObICnPHDLAlL\nIBDr62t4IjEuxlr4EQd90+aHbUtErccBOjkDyNncBKPB74CCRp8+XoOixO0U\nyA8BIot3bEa1fY56bwjyYhZ/oTiFI+J9wHfOfqN0P4wXvfcSVIhr35ekEwAh\nm3O4033aEBPx3nJ/FV4kM0thcYrzBZOr15aZFma5DWUnTck6Uzzr88deb6I3\nCLql\r\n=bdvo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSTOJ9mFEVdQT5NDfCFal5XV6bNdniVB2NF7Zqt5J18AiEA0sYRbTI6OEUEHh2QFG4lkIvizdNqXHQOq/8fAD1yxW8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.b7995e49.0_1600298775543_0.935845121642394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.0da3ec97.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-G19WnKDyBFqOQkTwPGDAh2ksvLyU6/kXRCUxgsPbA9IhWktngPDzbApvL1YvwbYHz2jgYAWbeFqbRwo8uktuPw==","shasum":"6bab44d7599094ab6b9a0017fd8b9a36a9a0cb63","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRVCRA9TVsSAnZWagAAYwIP+weBhiLEQknb+Ye8ST8P\nyLXKkOLNjiSqE92iySn7vWs1f2SopgG2Jp8sQts8+6uT3A4HmGymq4vHs6IP\nXeQGTZb/22EBwWKmlx6zzBUFc6yoFEsiO4PsELAlJ1OX5VHsnnDeMRS6ulZM\nUaiXfS3J1VEqP0aEmk0YojiKBLHQ6SFtRUZ9sfVn9kBBT7X4FBIm8e49geJ6\nKI2T95iT1kfpCByxt1y5AgbYt9c5GXrLqWm/DuusCt9zzjePOrR6H+642oRp\nmghrcJ7Xh99t0NJ97UdCejpD8niBLGWCgo7mGKk7eNXCCl6eczOgcmp4G7jm\n0SSULFdLISTEWnbXchadHwkRcJKX4KdPvgHYLxiw0YBGG0KcNTGj4dCDDomF\nNZRC5HslvOeXsdzpjtkvS6vZR/uf+6HNowSprtxbjwFT4WaLlEXTXhqgp0vh\nxwp00QG3wHwd17k5+rD6iVMoVCDmKziUm3FQKsAI3NMbKd0wGP7Kq9JzCciC\nUo8Po02+RF6kLnasnhHXdRG6pODlqa71FbTItG+hcDiSPkjKa1e8TGy760K1\nIMn2Vtvx+4OdD0Opyl0YB6TstytoYpZRClPgs8rRkKB+xwZWWlwFxiD60Tj0\nH2Jrb5n0zKaEIOIQofNL4Crv0bAnQASJCkORvVwGGhrwSg5w38rc81bDX/jV\nzRLc\r\n=VZiE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNxIiCtjFoONOL7FjeQ0fkSFJP3raDXbeSLpUpY8L6xQIgbjlNGLM4QzpsxcYvrGaBr81P66EOkbkZ0U82AcVx/EQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.0da3ec97.0_1600726100559_0.6811162765823855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.a0793c96.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6djK8hZ7aaW3BE/HInSC9+Tc+QeWok2F8oXW0nL6cwPy2IsoWTApHAXRCP8EaKm4zei07+xeIOgoQSPcMLxBwQ==","shasum":"ac719db70618b68def479ccb18d0505f17921750","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6KCRA9TVsSAnZWagAAvIcP/iqDwxunXYaOTDJw0HvK\njuSDAG/tmtVoB+7aQGOjHF2imN0qjDYkii+i8OjfM1pb7VZzy8/8HiR1WGsc\n44J65MDNk3k5qpPLGhGysutcTs0KQev/vHArHTo/tT4H+vJ+q21hJJX1pL4l\n3NFC72xE21R9C8umLSy5mjFhdirSC21j/8nmpkX4hJNHau7o+44PNwmZBNWO\n1hJNGNYh7MqNa4V8O+af3fDf6bYr00E5RjHiqxUZyfTDX+38BBGyLHHx7Fbx\ndr9RwPGYl1ehJCLn5MX42CO9NQyAMFX8TAY/K2GgNTZnY9b/jJIhNAumpG1v\nRjSs6oAISA8eQB+95M5yPhKeOjcfa9GjdVUtcwYZjTGA+wOGreZ7FqQ1hVdV\nRhMFYnB+A540eRHiPPp73rRGDSReSAxeuJkWPyxSKV7u4OsWGhvCLx4XDcLM\nHc/lJF1jWmEh6wNhpuaMzTAvHfoZGRtXoF3Hn1MpF+GWG8pr1NtriZlIiZl1\nB61lpr/wyFOub4I5RBzWGWs5QtcDcNgvbbY+Ug/iLXBCRqgzUKDnNYoWiSqX\nfn5V6aT81wdVmEYKGnrwIJOR0+DEo+f6zK+PIkehkkAGYTSp9AvfF2Q9kTt0\ncuK0WxEbTHuBVBHyHHN1igLrMFwO+XCcpea7CjzvdzuPyHdQi9ijJRrXLqkB\nhvJV\r\n=L5yT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaGtwd/bsPfxoAQ2b8TgdyTpfSM6i/ilKbUN6AxM5phQIgPrqQK6KkgbItHzCveAVt0K7Q88remZFwLIMyMckVoCQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.a0793c96.0_1600794250032_0.8241037686210757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.06998a3e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-F8rFN0InX686ueATh+LpMrh3qztuxPr1Xzkvv3YBEIqqxi99U0eYJjfr35HL73hQmhO6DYAO7LznVMEeYGys2w==","shasum":"92dc31c37ccdaa2561b4f3d82e0ef2664669ff39","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGXCRA9TVsSAnZWagAA0NMP/irTu9/VTLdEYUN6Pef8\nhutw7wgNDLWTqt36ZCDA+XdR8fxJhAJ8ryce4mNu+s2/GitwYM+lTpQjvRKP\nuRUVpMBYTGPOUJVFcyTi8+45W0LaKLeBn4Na6SWQ2V6nygJ5BVR6/me3R1U0\nOAPbOYrpj4m1e7sOd3D55t5W5wISqt2LIQIyeNOqeLwpe94YB3x6U5hqNLs4\nMJVuFoHaaM0HF/k3v22jAQEYu0sRdMD0e7kq9cmx2apT9/Mq/bjz/8CtZQV0\naWMdFsmMaT+vrNSq7ilEsC/dvWpT5SgJBfBiGZGQxthMFmq4w2HcRELjiioh\nILYB/gPavAMQPLMgOpn/dVGS74rZmyLAPE5Cdv1ez+3CokST/+V8JACuC3Vl\np5y2lhj6ZC3HSxpv83ZCZd3DRhxgO/OyC4bLMRH08FXMkY38Ejnn0vFYYYEF\n6NulPd6Yo6Ep+93TFEhCfG7UZUfmgGgi/o04gspe+dzn6ftY9kicIrvRz+pP\nS9rAW8igoYqnHbUh7rk+GGs493Yk2IkT7MUBTyaW5pSnbi/YKBJN8jmAD+4G\nqnCHqIR69RrDnVkrAUGaL/OliHR9GZ1jYEfgc63S53ZawKtMXGbr+NEPki2G\n3HamUEmtHuQm1oj39KGVo15wMqAJZ9L4mhpucdjTuc7YhpRjfXLw5ZOe+xgp\nhOpd\r\n=nfLi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBOQrPHFr7l9fGxqvsvqpc44YtUg3/Zm+ll1mlcpdjMAiB5hPgovbDS3tvleppw6dGJxYSEQotGyogBhKoPuNtDSQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.06998a3e.0_1600799127182_0.6860518199382979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.3484a90d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-u7PXV4CG0jZc5Mc5qew65NEwJVR7KtrPLmlgLea0vA9R7w/E7wejr2uSDa0M1YSczU6YIx3Ndq1iyt8GR28GCQ==","shasum":"39a8422e3eb93a923e687f6798db6557301fa32e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTJCRA9TVsSAnZWagAARZoQAIpDM17wMCN2CR6ZKM6d\n8CeHAFHfg0Tybo+PnVnSGdgp6SAroUCqzcqFbqMugaAZ7Emi5KC6avD0zl3E\nX/dyG0G8a0R6yRDh03d8h35OdVuZknn1054w6SxQ7HUXuwFOSwryqcI+XG0P\n2oM0c+z9D28kqQhq/MEI9ITrVcaibbewbJ4hKWIfKbk90b5YGQX25uYN4Nb3\ndLKljfIccQDcCp4LWAYgCbdJRbRUsiuJAm5jZPMLOjMHKj1kF0mtfCOlGf4S\nTM+rKbBAwxBEtnJjhi5ZcddmZmYlw7aoe5Tgcvcj155XpluSlJC7/y8J04FN\ncXx9HzPn8VSViEag7y5JKrkal2ZOdn5+agTFCkn6dL+TiBRdJjWLk+FP7Lyc\nqfl/8SQvYqH7HCUhqfFD6/v7cRgSXpEcyHeqhI5DTE+XOkOGuLbwE/jCzcgz\n6AtKwYOjGVCvG7La6MdUHRPbKf+UvKrbCSP1FHVufrJ7YBEm8ZM0OuyMZa4H\n7TO3j+muxoYWufPhP2qN2i40kvkiksOQKufV52Y7uZu+T0jBsaQSUHIZueOt\noxka2xq5WoPugkoUdKhHMxfjgg34Ij4KdpHpt0x7bQgbeAFq778ysk9VGrhq\nSZ2aW4OICxIShUKmhaw3Jlcp5PJ7H83V0umVO5GfwDNLGi1SVMcS28ZMK3Hp\n1LB6\r\n=clkn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSlaSpwPTP66u25Bykil2tDo+aAOLXZ7AWKqiS+0SIewIhAPh3PquQESQ21J+w3EKhn83HfCCEGJh+BOBGNo0UNwOv"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.3484a90d.0_1600812232832_0.9714864301310564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.3f99af40.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nilyYsCOgLyWqrdsV4U98bXa7CBNgiJws9z97mf+qGnYhuOeOBr6tN2sYjvMkHmgt4ysqSe7kPBQIhtzL4KcCg==","shasum":"d75a117920d91228c6cd1e56e6b430d48d610665","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSndCRA9TVsSAnZWagAAxYwP/2vnCeStuyqQpWemU1bD\nPt3QG0i3fqrmUmcDEDUsjQ2C1VB+bnAG8bMXpqBPdI5VhWMod+WS4xDWcCw/\n3txjzFr2J55XC1R3LDMawbGhWR9nIf5Hhhj2YCNOddyYua/rv3L45rJ4w8wH\nAweMSiobL0ySV0kI8a1YJd496P9LU/kWwU88z5mHRFj83QxNT6LTPHjveS7z\ngCDL1NPOKzs3/VVEzfw4GgPbUcfEn8FIA/of14UyT5XZneCoAciYqcGtPkOi\nyQLO51884jmJShyf5vAcAQw3PHi2aioWX4UVmmaSbNyfrXv0UCzwG0kqzRRw\nRLzqM4L0OpsRiG7cbygw8n0gROYjrnlvq7cAlXqnCEozOkSmcWE3wCrgTlEh\n0cApVC2wGb3ftMaOyX7b9SpNBUVk1N4dUTSqf+mdBxP4mR8d1rM/sBv2FqKC\neJaonWi8mfThGMDdJR+CiMvuXdkvn4yCX4gEhlyOyk+vdJG5BMidyHcT4knW\nZineo+yL3lA0VMMvRWPeG3udk8unE7cAmkVTDGQmrKkftvg1kLmHzLBZw4hr\nd0MwLKWIiOp9uXE46Rxb+yr7DrRBMDFHGGFkyPf2rDgqgyCjtWrXOWetePsw\n99V6ZCGzYZ/6WqHPdx5TZwGqEnVYBcxebhiF5BiC7HeT2OgGc9OYiEMlBJ7c\nVmKw\r\n=7z3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSpcagcPVQuZ77rToRRECbo2Ss9SPEeIR0xdOaNLGCeAiEA++Ayr2vbal3ZgI55X/Y9wlj1fposDRFhy45jjt2pc00="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.3f99af40.0_1600989661163_0.0694304187955046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.72aa1129.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DUCx5o8seQjH3Y7xc9FaN/e5vQJE14ymzeTE2KF8cBd109IRzkOr0KyHxpdOsc83qFtB6Rw9HOCA8JAff8OnDw==","shasum":"78fa9496c126ba906afdf2877cc65d3170879dc1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblvxCRA9TVsSAnZWagAAv6UP/RZi8wzDs/u4CbT4USEp\nFsmdalxhUE1+McKtLZM59xWr7EXjCQ3vrYcG0v9ZJFbTdIdzwoN4QY2Xbncs\nDH5/Wcv5f42eBPatdc2SB1lDkUSxAz2UcjPhXJIyoyJclSuYFaXeDh75pZnY\nuXV9A2lEJ93dufepjOva3Ec6FzAsgLuYsr95tUyJ0tuxkIHo9i5J7pSja3QY\nCmpB1gLMzCD2laXmjGQxjecBrvPzwDIgEpptKFOzY/mzQYsH+h+FOlJMvf4M\nvKrKWeuvr8ZMzMDFygZ1/Cbn4PJQdnET1nFBHV8R5J9Q0EitpHRnL3Cdm5p/\ndLQ/N+ZEtVHdkQ4pqv+Q+br4dXyqKxf7GjezeVhd+l/YwJ6m0NFFPEBwDGNr\nZVV6wv9kAlXPGZVzeA88tUdsrjmvGDfyiUIxPRL87pD+XyCYpSdkW+Z3rScd\nxMYOpOarN/AnultT8+O9cH4Pq5f1wsy7zkUtNkgeWNbo4LX1pjrARpUafotE\nSybPR8vdoZ/WF12fhOmwcI1/L4yiFgwnPj24DQnsI14xDKIVm300MHV7mfrp\nxBw87w1xODImwT/AHjsso3auFkZ8axx+ogXMuVxxLk7j1FVbIbim1aeAecNg\nTVHSbNZdLl75qdfOLiFgCAeHvNpXxQerFQGw4WAgI4c58pw7XtCDq7P7Mauq\nRT+u\r\n=pR4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlAwzitlEOopGqwU06xlHRqU1VX0MJIV9Wxn/LC+HM1AiEAjQw4hzB6JpNvRKoNR9Kx9cHgL+iVE8Gj3KLcifWFrDE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.72aa1129.0_1601068017005_0.463378651675165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.394fd3f6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7u7s7qY9bh+bnly5vOa87lOOIDZil2vhC3MvEnCGZ3UVg+Wi0VhxUioC8f2V0chb1VWZZf2HgIRBl02+RALQ0g==","shasum":"cff2fef1070268bf25eab3837f6b75a3b9c33a4e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce83CRA9TVsSAnZWagAAd4EP/RjvAVJUxQlb478cOuFo\ngKe9Pi0MeqTeFFjIuhP11xUKBrW4QObB/+kL43qdXGz+EmZQ//+Ajxo3gbbD\nVo9M3TXYSlktJR5LybshhFsHNMI/M7AjBBhrm4n4DIMUD2rEB52q5wZByozQ\nw8qa+ozEJZBaHdOjhXr7PIbl8hgD6Ye+I25sG+imLU8oLKBX4MGKF3vjpXUQ\noVYQapn/EtqcjB6Xyv923mCpTfgP7TsyPqP3GHbiLXY4V/kIovP/Z1er56WT\nRdoimn5pcJ5/H2JQhqHLZKYvveErI3Zzn55UYxBOiAPVPoWuR0AVlMtl96DO\nZZ8tKBByFXNTXk9Sjzqeucmt2yNEWTMg+WkVMKI5OXAlX9lCkRd1p/ytgstL\n4QlkySLNIadbDXVU4cgJDA4A6n5fIbF3jDnMW1K2XrrJRb20/idxPZTZf2im\nkwcLuDyEfjZLCRg6hUqct+8sisZ4gDnMRJJifi2wbQQ2/6RRuKCrBRFmFRX/\nO5+Rxk+4tWmDwk8QnR0SXwtitZtyLe1fFRAqX4Wl1cs9QD7VN7yqysKen/2P\nWMh1hgvy0ROcxa3bDZ93bevV3SrcHz9Zc5vMG/1IzmYXxigXlec15sOz2Oj5\nW3MrhZscjN2AzLWz011FPxcsAJ5Kr1PrBmKsPEy2Vbxp5U35PWayvy6fisSF\nn2T9\r\n=PyuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1fIIrmu1DsQ9BYYpBQP1/kpkr2AmMsay61pmzcJBkbQIhANpPFWQd2lv1M5EUcInHLGZoVJ8UqwxKAVbdwvj2g+wq"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.394fd3f6.0_1601302327308_0.7564486127705266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.347110f1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Uf6VJhjK6qkzuFnGTtfTctder/clr5sQ7AztxNzrmD52Jk7ezXFWmURyNpu/EN9CeA2+V+h3z1+QjPwI/5dkVA==","shasum":"ee10dcd8f268381a8dc109c1d4b1fd24792b2863","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQwCRA9TVsSAnZWagAAZSwP+gIUAv+AW//jUxOEtWcY\nPxW4XLnH0G/fAFpxvpulE86pcwkvvaFAsNIOHFziBnRcm52JxVZlStT5toQC\nqw3qjHVT448SvGbn+P8OfurTF6sjEpeF/qn3iXJdh9/gTaEtIY+9b8wz259O\nE+5bie6FLjqnAena25EftnIG1GQa8BvMo0qmWcitEqe+KjBu1bC1bFznf/aK\ng5+gEgkIQhOJzw9TVJ3sv+LuWG3MyKcrCEJ9JpsGEh0WQsXYfBpXgich+U9+\nJvYvrZofut8UDW+7MSdSgz4f4yRTPoAEmxMrexJrH9baXbG6WzsGnj7g3xlk\ncJbUFvCmggQiH8q0B6zbA1gdKHuto5IFATK5LRQKT/IdfeZP9spO0h1oCUcQ\nFAZJnnrDLdWOZmmH4DwL8ww6TLBiGa/rGU2SGKcGajindk6Rd7x5wmq5Q+KJ\nDeBCrqFNOqfMi8HJXYcH5nULCoDH1g9OHRC+CcnoLLlCgJ7V0weZNiXNEpNe\nEXJuvRzYqJsZ91Mu5TB82eeYJjVQD6a5fq5h2fcdzUc1ZZWP0FTSV5Au04QS\npDhe4ABe7wsVTO4JBs7xUpjJZVQyIS3iAquMTmUudG/f/v90BX+/Rq5xQjvB\nzajAFi8rxZmXIaep+DjDNip3/TSgcz4DgwxX/dia1WYXKM38baN8TR6QdGHe\nM3t3\r\n=Hf0u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBadefRER/3G/l/puDcc0s/n0+RsYhlR87prByBFd0csAiASPhZKquYlI5DL4yk7E+iLMR13hk/1l/UcBU7Z5XB7fg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.347110f1.0_1601311791717_0.010330619627484605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.5e330bb9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-h+uEOZbI0GNvz3ahdGQYgQM/K7uf4oNwcgYNKhlswFDZLeVBFsFA7BD4isc0FPY1zIXvLO4wAcY0CrvXYGnG4Q==","shasum":"b832a41d77d25d76fdc3cf9a763094dd3cacf3cf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAVCRA9TVsSAnZWagAAOjMP/RXaMhivNrv2ABQpifVm\nRkdOoykGMhTktB0NKGyQPEqyYWQcDxJ3b8qaHKTm8XcQgGxocJYjPaVV8f8d\nR6qKB/VAZKHmdXA7dNjsHvKl8+tAHxwLMwbmcnZNxo/pDXvHBc3XLpF3gOEs\nkpihzdCrP2ObPu5Ls8GFf9UfOFyO4ThxY9EkigtybMc/lr14WUtNS5p8ij1w\nMmMSCSllAr9PAh9WTMcIG50YDcFRMKpV0U6B5uu5ln07zuNkpt5DFgP6xlR8\noOMhEhs7IAN/RT/XAC0uUcu7jmXHB0/zJ9+RkUAabplPf0ivQhhQXZlGXoo2\nopd4hNo/ZWBR21mKseUBWfHksPm4+FTtUVSOHEyIVfzUFA7xqV9eS2kDW66L\nMJMMaQdZiAizGZiYh8F0cl9aLYc+nfqAfKcDofECT49iZOZbh5Q8e/Zpwc46\n7uGfa52908tHj9GHZ7jDI++wpvw5GBvfNXqkvyLxDXNqozIik4JLAI/T3lFk\nI4Hz4qWZSztbzT/To5Tsdur5BS0SNJPsXJsfJfv5aRzdxcH65PDX6BB6a41V\ni8Z4KiucgszAyOwZ1yy+RQ7SCht/YR+NBhiN94Ln9fAFPZpWR4lv7AgJDbYH\nmdDqZ0H/voj4lNQCD7hrHE4QAe2tNmExTwnoTab3d9uchPnZwXKG/+rawRuo\nV8Rz\r\n=4ard\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLNTVoA7CeQzVa3iHm+aU28RcJyHLhUKn49rHNWvv6qAiEAjVNg8A9XSRP2or+YlOo4DyIY6t/cNnOOLFeuruN6G6I="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.5e330bb9.0_1601503252688_0.4457387868303351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GShYXgapePDjZKJtlXPWqAQYmloZUUif0M6B5M4peLmS2DKIa25NerAObJuVzeaHgfQr7bVXVIB9JSvCblUU3w==","shasum":"98eb7e005de97827b123eac5b058ed68013fc001","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjCCRA9TVsSAnZWagAA3boP/0Wbq6CUfbzuiqX7VfYS\n4AJrDbOlb8VEMgG9u8XRhs59PPFmN0MSsdWMW3x8wRjJkGvDaMD9OBqqSgA1\nWv+/i9ooxiwKufp/NoJJSiDZeWkhFaQLIeUXfm1+2vhTgMkNbMyxkzEb7R03\narxJ8gX2o0BZffwHa5egAsm3j79p5a907A8ju6G5/K+QfNMedoPb4rfLtaL4\nN1LV7F/SCAmQmrLIKgE/fQ1i/+CCt39K/1McXFrnpavj85Jdg3eQVNZw9aI4\nIYZr68kmUgh1TjbWzfyUW7kl5x3yZagC1WZRvClVtGjPHPWOfbFuEHAU8Ivo\n5UXBI19QlEaSr/J1QmM/aOOFrZBDNLyKxJf4vxt/aqXp4PiFzifzQPVyFahw\ncGyyjkmswIAykXAgdiri3NtOCjWdl7NVKppIKbvRrtyoT5VDeTfA8wLHLzng\n+y/QB/YkyfmV1ErObWYBisz+x9PVjObIdbDOmJ7nmvs3/aN4pPn30opz0wfN\nInqAlOPSjZq7QYMLw2VBVmeRIHuZMs0ayA7Sbcfh/8ydgmxX4SVGp9ZuC/mo\neML+x7pwopHC41B/A20qdYuB+HsMK8A/cO8OHGpM9ixDUQauLWxsyuzv1yGK\n75+ccfMk0vyerO7j440NaXlDpzjqeH2mFYn80WNRLB+muZsJ6fttMK6acDYj\nhAjA\r\n=NoKU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtExJl82LBCXfqKcbZ4JOQTFS6stYSlxzd9cmyEdGeUAiEArsJpngPrVr3aWVIwEe5/dtr7PlCHZf0zEKxDvZqU5kI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.30b9e3a9.0_1601505473728_0.8685456293263225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-w8UH56h9YrTiPxy3jwuPcHbnNa5eb18hvJ4rq6/VO2gyZawz4CsQGxhqrnIbmEoPLTiSnD0vZaryGErTH+1rIA==","shasum":"198fc700f23eebabca81f558dd9b8eeeef566f32","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmS5CRA9TVsSAnZWagAAZ4AP/A2XEQxgKB+1ikceQeqz\n04Qktn+qdnW7YLqx8Tg7sVkiF+en6e1F0pR0sP7AqtLIZs+Om9UwDaXfU0oO\nISLiHW+7ytrGQZIh0QJBTmX18TI20PMV2tqULd1TAx5eOEzNt09qgEmMA4Mx\nyJwHf2EUJoouygEVi9wDbAxw2RNF5LrM5qaFfR5VrlKlsbJZASApjmNOvk65\ncubOAPINADgohT+g5zuVFoaAZU1bF4QzPKe8xvn+Erog4B77T8dDe12SQLZg\n3mOhRRTDzawDvslosfSN0bpFu/B4axyeu9GeKerf2eBplCcqpa4I3+/4AV6Q\nZPj9CK2Qb1abKeSr401h7c/3aQoXK75SK0THhA0pQLVmAAWyhzhvEhsmBiU2\nbrPv7KT2oMNp2PBqqWQqCNRid5IYtmc9N83lFnzyAo4jt3B6Kf3YKMAsJsHP\ng1wgh7oOLpcc9lBD65fwoi5vQ7Fkubt8xuxkEuLaN60CK0wyUlX3M2DO2qtX\nRuSDebKekr+Wb2qUR+WRxNb9EA8TX7tPvAQtjCcDuMXYxLxqfVMk2bGvMuQS\nnKj2wd8q/q0L0upTkLPV2u5YDS5/nkPPkBMYvkbueg2yDiXTKC+khjLQHjl5\nZE4211GBhNiLtdrwfYPJ/5hlT0TN8OTUBx4mJsJfTIOpEZk+c/VnVigx1gnB\nTqHL\r\n=YXvF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMPXx2od2re94cfl7OfPHYxTmzb1Ci5kb6cj9FTgrIJAiBVWoIHpEPr6/Nocey7vV3sYmUfsQshfY72p/co5o8WvQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.7bb04b9a.0_1601594553335_0.09998898654593047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.615d861d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ngBdcvApNDd2vCtHu10v3QKWSWI1xMvPBtoofvFZh+RadxgR9e9ZJcmT51gT5rKscfSDSR9Nv+95RwZkMVOSZQ==","shasum":"a1155a4b9c8d4344b2984cfc9d90be7d482a7a7f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNUCRA9TVsSAnZWagAAUDUP/RW9EruJU15wK4QUkM6f\nnoKZRIDOCX45hnr806YVmtOc9oL1i7nAwILNcCK1XAJIUi5M0Fz1rrvPiW9Q\ngt1n3V/Z8g+98PhfDBsCeZOw3RSkkdeMlbD7R6nIvpSeo0uABh4TZz/wImYr\nBB/ZQCG8KE96JuGBnnkrMCG9Efu2VIeoDUjGceVn65PrB+qXn/Ew+MIzto6K\n7Hnr7Di+5BZCks7Laa1KX8LP7szVYxAVrK4FivnXKFAKkPoBhfSgcL2GY9oq\nIAo4DeWkGAUG3TeEVPZ0M+yZUlibocnXLbMuD0/SHeExCdVHQ7q7rhsNq3w8\nozXeERi4RfxYe9JyIrj/Id/1y3E1w8pco/CoZn2IH5tm9PXo50WyS545/OhT\nXSri0QnlzTCOk/QIKW7eGZ1QLEXo+49U+8WBLcRQonY2PM38wbPLsVelVGHX\n032T4b04PP5DGshaltTdxlNSXgWJmXs1kc5L/nKq1ASZVzYPT8VevZRQhwNI\nmlvHrfeG8H3IYOgNOV2TJ3cV4TxHdYk8EOw/kGxng1SSRGiwIeXZwIJefFQ+\nAwgPRwUbfoLuk/tslTPf3TgmJwgkc8a9hHKt5oQfanTEN0qAHHgpfuqZq18X\nAtu2uXnsEV+1k+rmGPXOebHjwC8MKVWDqXKyf4Wd/jNELNeKEj1Bn6elbntt\nYFu1\r\n=3UUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsuWhdrkrLZ5MQMag0LPgeLh0QJrV9vuAkdnzK4cHrvAiEAuexpkTaRN9Jw/gc7t6i/UaKriBdnXA41DBF6sqU8fFA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.615d861d.0_1601602388073_0.01059979835396807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.af110e86.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-8/SJIjgQ/+34yKhryWQsqmbJxOQJlHK9nVc5krx2wdQOMmCz0r4qr+Xt1G1wWLH14Kj+8p9cubyyehJ9pX1+Cw==","shasum":"9f5b280b5195e17d3efff397f23af314fa519193","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yTCRA9TVsSAnZWagAAJdgP/16FLMp198yciUT6Tr4b\nyg3Dr9mEhoU+eNFPOsCnv1MapT00BFF5lYv3NojLk6R98dcdA/tGnRkez/Li\nCL+0hklt3k4UBmhkmsfSHZtTnrWpZhp8oAwAwOoAy8nrS6zVv6bfmOuGXvH7\nHSJedNAGFCn1nFT+btbufPIqV/O65nCDNmC0WnA78aeA2xIo8niAUi1TYq5e\n+yhYirNYLi7i38wpboXupX4ESJrOHqg2O6WdfgRfSvIElaNbM30wV1BqCQxH\nP1UlCXJscEveReieCq9ipxbgQ86+RRNKm5PVAWKBSuO5kp/iacly1VNRkao6\nM7ItApAPgqq0kzPhXLu1BxrbWvMwuNG3CJX3Quba/6hOiN1AV6j+AyRuRqNy\nCcP9V8niDPpqE6PZcHTKeatr5hpUQgmA2+18obmDF5aubEV3Q74VoId7EPmO\n9EutQKPkZy7UubqPgvFZwKpNErghaV2ayyM/xcGX9PI5/iQ4lha1G8vfaSUX\nP/GhlZ61mEFS7FyInokn/+y/0JpqInua9LmRVI9SD1ITxwlwC4xQBwEOf146\nusH1UKOSdGhecYLjqkmnFcAH7wLraDH/DzvDiFuorII0kbob8HW/WUgzatC4\nrwuw2k7tK/bOkRspKNdGBh69Ojnk5G/4zTIqqjUfLHYdTJIPNVOc3aiqG7t4\nj7o3\r\n=zU23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEri1N2oppZtFzG4r36TkzQPrsIbvzs5S4+aaEJPQ6HbAiBKiAc07FWGE8l2NN/oAYkzgEvaAXjQ2TIfX9vGmIeMkA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.af110e86.0_1601682579326_0.5884519510459842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.89d27ca5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wnt4An5ssxoBkihnZYDw/Fe9cT5mBNsvXEIVCr2TlVhHSsVl3Fxyhl4h5Kcgr9ioNP2sMNvzdRwaoqjoLqENxg==","shasum":"46ce37bed0980f456acb12e0d2d3580fa89a585e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fZCRA9TVsSAnZWagAA/hsP/1unODqmZAO2DpGV/L5r\nL8LGND7+Yjd4b2223IreVOpQtP/nmGL+d1PbZ/XRX8Cq13Tn/FLnv+2EnAQJ\nxpphotQxk9BDnoXcjdBcV57wPzrSDQLUN0VFKClsm07rLolBg7lAgLz0NYUw\ndYUqq/1Kg7DhJLVOEtAqlmTDrj/UZ4Eu+36yNKCHDIk7v6dy7b3JHqQe9cw+\nZvE/aMoqPlOB+o/i6CM9zbVBfCTjCYysWqj3i2idFSR67NCkRPMGDVzgxSBA\nNjt5ohsVUwyfCM9Ck2lllFBmCiG2EGpA//rSx8q/xFIiw6NswJ5AmZ5ebDVM\n7SFDNXvlauxhjL6FAvS3hBMSimdce7T816hJHc9gckpFv+bDCmlvZadoA1j6\n4iHSbt1c1VZD56Fc69JN8Lwv77RHwWcDoVDSEf9UsJyjfels2IUxwb20TLT4\nLwZpT3rhNCQnwpb8S677ClKzNoxZ/UZ67kr01fdxp64F9Y0WqlLqWI1EKikf\n5LFAcCKTHyMUX2XbTU2xfKVgQ6zYJRL5Bkat7ViogOSjzCEh9rpeNDWZ0j7q\nZrjSIwFFbHLUCL7eXXaLXo0n5T2UnjGe0YzGL1c6LXvghVuvIuKSUAlNwkWZ\nHXk3i2MT6NR+tp0gPak4YWtaCF6eq6gg2PtCgDh37slzz3LmECaT/ko1C9yr\nWH6J\r\n=Vfeu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvqRLKvJJCGumv/Qiy9G3007usFPGFQl2y9seMSDe/IAiEAiApN+3oospkFwGNdkwGGOWqRYquk6SV2/JDnOCNiiDk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.89d27ca5.0_1601947609314_0.9787540949485198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Bd/nFU1krN/Wxr97+ZMfBp7bOFWhrPqlMtk5vM8T2f2wFXfNEcvFANgN53PRQPEZFh9dxQ6WzBXBx/755efCMQ==","shasum":"ba83123e42c43eb845b39e59a30d9461f553d027","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhPCRA9TVsSAnZWagAATUIP/08TBLJaN4JEh0I5MbIj\nIDYNGxBCHu6IS8i3cGZfhYFUWKFV7BuQ5NnQ5sHQhkB1Hejx1Mu9aEOCKCC+\nZbrsstJzc8YnQi7Y9LbuEg3jAi8EMym8ZmXhddSTgoI1damn8LV1OG/5q5a6\n5mklfV0aAlSteYqCZ2s8FvglYFLaQPkhlxQ78EnX5RvEqagcVQUv1hoI9xPs\nHASN8Pcp09e6QaIbjXjP7m7BA/0imoG0g3z5ERy4pfDTo3u3FEdtdUfjwspV\nv+CH44RFcHlmzJ2gtMoG1pFdKtmd3YO3cObBRRCl8GasHEu0gtzYMkkL9KtE\nB+MntriOmrFbgD83RHVLmZZnUZ2cy7YGsDrw7qVhM0pBq0IKb0oNhS6wCVSf\nuuleXWVXg3sDdBuoQIJDOzmY7uvBEhei5hu+0YbBZCNacJsXTEnKoyAq/72U\nbCGjACA0HorSQHIWMKuNFjR2utFKe3Gd7osNRb2lkMRb0ujHsnBxiTnoQ8mL\nv8S68p77qQb8JVvwX6QeU1lh4CIvkdxjQIRARoKP39MGWwoQVoOjlj4od8Np\n7n1/TsH6UOlvf1YLU+4IlxqnP9lNaW4gxkcjC2IHqpJdemJtn/oa274nz6wp\nMa65N2Y1x6tGjQf9uxXiCIaHpisacq9CU+6A6sQn65lpS1XOKA7L/OFm5i/V\nySYh\r\n=975D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC68V5K+Bsxj9I6dfAB7W6uSxAwl6NDBPCvxc/6ghNSigIgO4yv3wrqqfrcVcO7VrFf3WJfLdOCEEtt9CmHqekLtAM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.9ef2e7c2.0_1602029647058_0.3773984386053988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-slider","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pKPgQ02aQEQnQxn4RHHbyfZkKX9jwPtdTzXvUzuV2GLoft058bExzcmx1EuKkOdyxiCkMkA2fl2zhQBO1c4NIw==","shasum":"d574a7545c4e67fe7c00dac95fac92e36557f441","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffh//CRA9TVsSAnZWagAAAisP/0B8/ZN6eJ7gzUqf60xV\noL1dPbrtyg1ce/kAC/I9kPSRN37BD2GNDtUrXEMJ7jlIqFzbQKTk1PKVju3a\n8p1il0QMS6rj+O2zv+s1RCSE/kishGp/3Ty5SQU2QyoX4kp3h5ftYKbrNeoz\nSBAC1nV99ATGpfJzDW1Wfd5wlvGMHUiRZZtWvmGPc2vNvNU904Dc9P4Ajnlo\nXwskAGykA0NeVae9ZsgL5OIv+kavR5iJjcHzGX9Av0DKlT5fuET+uDLaq0dx\nTyJo8vyR8YiY9z7uCxoTIgY4nNEpgtMb8tRvRtEAOmoOgxPw1/QSfUx83y2X\nt0VOc/Alzapl7whrtjwPDO90xAthQQqGDawsqer80/fE4ynOwKH31t2eexFR\nUr810ZI5tX8Fx3fBFIRIjklEQWffHLihLE6+hiBbYdVLbZwCSClqeH0+utDe\nxKUVUi68eEg5b6hQTg/l+T3rs6o+CUlaI3heQLSrnuKVfs4c+9ekD/BuIpXT\nxxttjh02xAZGe0Vmjwi9xbmiU8BYEQ8zp5s3eGIiDoHm4Bq8N7W0swCzy8eV\nEqxbGPukUNj+NT/19HL8l7VErRKcOSCPVqamabuzogfEKBIKabjhZ4t1YdXj\nF6rP1FL9vIUYy24LGvzgLW/bgBrsixpy3ifoT+irJh8IRMqH4k4aDmxPk+yv\nkGie\r\n=3o0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrHCoH0gPrRP80jLW4c+pPKqDqjy/47QjH/yM3ATB9pwIhAPi+Hk/opFBOKvlxoABriLKAuwiYTCJSsO0dWioKjLku"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0-canary.96c8bdc1.0_1602101247005_0.9560552293959304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.6c21f034.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VqMDv6dZLpOPAi3UDXfd80jJ4UAPwZNbDdwH2xfZwn7ctXWXfhLo47rbztGasJm10Sj4GltLhI+0/KLs0AcGyA==","shasum":"fc13367c473d37bcea466eab131b4892da8acac5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkF6CRA9TVsSAnZWagAA168P/i0v+PvplD4j3mz+DHlp\nK4kcbv/bq4YjNVJEqYDtxiyYMLVHykXwK25VzNy1iuIMOJjrGJ/SOqpsIQlA\nHPjYvaCMmDejGS4rTIrdSeUEqXbLADZQVwgphwjdoozmEkWQvayq0/nh68Gg\nQD3Z1j8FYBGFoEDnhizY4JSsA1Jie3tQMTTz3BCdhlzVPia1X1ccOQgX467/\nofv3DjYx4zKqSAWhL8UmGGG+56omUKsRdyimPVgnm+Y3gKfATGcTg6lqwz/X\nOpaDvCpCCqx+rEx2mhaacQp5t/++T9V6jKt8d7mdPKiO9j74CZB3NLwa8Gcp\n711GnAfVWUKLlKzfNb3n/UA1sURdeP59KXw1fFuvVGleBfAowRqd4ZE2q4oT\no1nexyBm1a5bNCe1QyAyy3vhAgOzYHCXbuECjCg+0cyW2g9ZaYvuvdx29v6G\nf4sqG5WplEogaMqRHxr3hysWQU8fiIjJk9Qvvdjke75F54XVoEmeltR46jRs\nf+Deh0LXsBE+Oo0xrfQCJ+FVkMFtP8mf2PB3w54B/2FDcyBzWGtVEG+MWLuT\nUJYHy/FON5y56etLuUD/oLrREUae4TLtYGEQEBpa90RAVjKVYnvc2oax0sIK\nY961wdqCnaFIrU6hfG5jlgkxN0mb98WzgauRj61l2+V9NMeZlxFwN6+virFx\nj7+M\r\n=ik8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoIgQ0NjuFVlXasOgedDYCBerSaom8COrky3p+qy34wAiBcQlp+T0H5XC7s3A/CFVHlgTUkpqVNoxAr1JxtvT5zJA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.6c21f034.0_1602109817602_0.5061334446913746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-slider","version":"0.19.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-17/OAsu0UUE7mzWlwGLY+vrQJfYPSLlGVeQupvohxSnLIbNyUcELMjED4pG8PMdSq0oCq+1+EURa7ZX6DR/sEA==","shasum":"2affb589e207ba689470a2232d5f630896405c89","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.0.tgz","fileCount":13,"unpackedSize":66502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIqCRA9TVsSAnZWagAALSIQAIMZGYAjs9W7D9eRnbsV\nlq4IOMtPldJFA+I4cHsi6SmzoZvDXs+IAq6yzDIVcycoQtE5VDz9eKpd/rV6\nFZq3/tCMXHaTxh8exifEc3hpxY50ubB18qY0mh+IM+Bgesf/RAfmMDqJZNHq\nIfP1DB/xSTzLQJv/SrtmlEY0Nyk1v11xa8ioBrkvHr/eO3PwC1f6lD0Hto+4\nmUSB5JQxk8l3f8L76Ww+IsouTww0q4DxL4zbrbj/ZuO/snsHn0hEMWxtWQLH\nmA0LVPF1zMugKd/rMhcWVAnR4zhgjlzRwzrFXmAV0T/txoV0U675+nM+1nUR\n8cs0QUxG1Fn7I8etM5FvrtbwyN65RYeErd5nTl9RRMlolKXpmP4NGrRB0SR0\nC8RcV+iBumP9/JoLrxyCBa1+jmWm02fIfOVD3Z6OIqsh4+cuJ523GahfV3gC\nPMaDwN5lPfs4gAR/udxkbS5wH27V1LG/dzlmkOrcyXCvcxNe4RnKmeaellbi\n1yghIQSnpBCYrLZhbWMmIkvyu+CGg+K+iXE7+4oRyhVx/AlGua+wjEVStqp3\nMeaCESynemcoJtPPlq6vhFpojZxJwBm+WVLmb2c4p+uYT1GghszQC2lAWhck\n4GuSEDHIf27nu2zUmpL05yBL8tm/EU05phsNYrhz5o8uyzCZfkht696Q+kIQ\n9ZLP\r\n=lvOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDknVyF6scY4Uq1N3qWRcYfHxIIzdJExC4/ikh155ibLQIhAIwD9qZrbKkrpNSQVrfqHhcqWnmPbxnLH+ZDHLhY4QYz"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.0_1602109993537_0.4471495264719323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.1f026aaa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JCHZVnU0zZUfoFDqrMW9+pvWEsy3TSZG2CyUKJgzdeV+cAI3b1VzNZacsFnuKo7XuD9bv4jtoMPUxxbyZ3Yjbw==","shasum":"815d10f4befde7eaa23bd3a24aa290b39ca5477f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hnCRA9TVsSAnZWagAAeaYP/04Ws4DdjwrF8OLvK2MT\nfuiKnHd6SqURAhuo5r1zlnSmT5m5Lkv5qLQtXaSOqYcRulWeQHZjN6MPtJZf\nyRuoPri6Reo88MuuExoGVo6lySJWG/DwIdUGKCzJCfr2hMuEiugMBhlm+f9G\nmw9XP3ajYpBUkVcYxRJVM0YU9zqG7h8IMuA20e7IR6T+Ri1iQ8kzQr4xQSDO\nCdTv1nXJPdr5NP+9xrOxB2pLTZ5rYuvyrvnatyDH/c6aP8NzIAegkuXmOlJT\nGXB6shI0Wq1LOkn87XLejyz7HVPSKWUq51hXR8IrcafPpG7rXURfgm8I2blT\nV70udVF/IEb65dyPKWq2CJhV7Tiaw/YAxZBpAP0oWjVA4HyrLdM8JiQEEz9w\nX4LyiuNvfLzapTDcUhbHQmj4997mnz2LwsDe/7/gvmy0e2Z5avR2NFWbD3tD\n5JLbEylsUNnkpNIPOl2Rx3lUTnujvrwlEn7aDt8X6pc/G05uPvbKajoFoA5D\ny/mMeqZ33vUFriXeyiZg8Kz1w1Ved+sdLaINdIGQOC8RPu6s97tJaZo2376B\nbJEOHImhloOuAaSsLJftWqUL+LB4gV+BzKw86Txm/APG5tVGQNIBtTiDXTQa\nDRxsSDsrQa79vfu37oVvL/lUdbGPRBrSwtXxsQl+czWb0Uv2WnHA6AIUxkyd\n57SE\r\n=tBMg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKoqgY5GOrphxrL07wElLXv2mwLAuv8uf5nM+hm7ZTyAIgcovVQyO/Q57eB3vvAXwmIZtKHfY0KFXYOCb3sUBgw9Q="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.1f026aaa.0_1602197606653_0.16193523696882584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-slider","version":"0.19.1","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-42hQ63Wg4z/GO4VK922VKRi+jm+rEwqN4I2FWBsQpLms+/9HQ1E1u4ljAtmoKhb1GSbTq0OzrJMJueM/otGBtA==","shasum":"155b57891350fa7cb3974bacef4dd9b02b5c0f4a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.19.1.tgz","fileCount":13,"unpackedSize":66502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tICRA9TVsSAnZWagAAzhEP/ji/Z9pkfsaJpQfXXAc1\nxVKCcnKzXkQQurLfAgER4S5CObH9fY8nOH2vX2J8k8Ef4AwfOHA+YpGP+552\nG34yA5hSUAK4HrYQaHsklMTcGKPFWXgFVuwhkfmcBmD/BO9keB8IKOsfpF2H\nWxxNksqShtPp8sm1VJfLRmBbmD3oiqeS1Gu3StYcu4iocDoyQGD+COBtMxgA\n15WTgFpVkP4lE6Z0PPCaf8LtE1Sv18Xm1qDJFnrj2iwKbBqIhvCIoBohPUqd\nMfI/5EQJu8LXfWsFBN1gUUtcDWHsCGZfan6ziVDhYP7lEj/ECZayDojlxqQ/\nkhuBxkZHFCY1rhDDK9aBiUv0/iqSMyTuERkvZANhRY2HyD+JHbBNMbvNnNe9\nfWikRyeDXCREgPn7XmclqkKkIqjc0A8/MclgY9WWBwr9VWGnupAX2zloGqs7\nVpkYSbuTbQeiKuTTwIZV/hfEC/RFVY87xiUM7BzPzQdGma4YujDaHM0AhBFf\ntUUU+IusGYXr4B+QtCvJZGSUQ4KAz0Wa5uC3dq+A4Jq76gsgpCUHfoNb7H8u\n0JtdZeF79Y5zLBjYh4SJYI42sjwDcrLLxFLEA8ZqRzDGKLr0WRz/4cdQ8cm+\nYLD4Ty7Z67rTDV4IzNNTKH6Lh0sT9wK/un2kJWQtskPaMHr9JdJNhoGez7qT\nXkst\r\n=SJrz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtmZwpZ9Hd1cP/5S1xSYCZO4UJB+Srp+CkFVprNbnVBAiEApN+VbVZEZ6SOdUWBBk2BzquZRt+Vf/46sAuG02aj60I="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.19.1_1602198343952_0.09381362228031498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.5f6894b1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ZZbHXxC1ybSXhCjMV02/HyLYTL3vuMOoXMBELa1eSErFzB3f34HKwBGAkINfRGN3GKCH6a/gONUn8ERIfzdMEQ==","shasum":"525ce09167498b5b2dbf9e7606548d1178e6ab1e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uFCRA9TVsSAnZWagAAbC0P+QFozX8MsQ+hfH+oRN6J\n08fJ9iKjzq6ABNxJiEK2j4OpNmH8YHuusXw21zCot6N3iBCoUYPZVA25Rsia\n0aQM5FjMiTV2pdDYi/05IlKYsCtOlR6adBq/IMRuGiCSfzfWLMQQQoV8hr62\nIPwohRtpwz8WVu2rGHOTkAEho/RN3lKAmk32Vj6Thw+yBp3kNE7AqsIhKk4p\nIR8SBduSkNdMPnXaYqp+HVX10hQXDRFQgLoCwAoRsMn4NYCHf3dXhPfv0Dli\nOG67rZlx1HXmXJwdqBkUsRh6hFjlzsrG/sCwFa4GXZgL/uZ6wgjoqvAh3BLG\n38QAFMPUrT8uvJyallsmSdUuWSy5WD3pDCezEjWjZ0W31SKePJH9YJv6Dbc6\ng6S2b6AoiStG4fsP6h0wMuhZ94Btz+1Jlv4GTF0hmOm/Mes/rCOQOL/33Ew/\nFxiBiUMAl/NDlQKyVh7HNpU78ukejpid1ZEQYuMkNsFn8H0mpgAlK4gTpe1v\nSOL4kXG9lrY6CSnSh+xW7k8lmHqiLbXX/MD0SJljBY4k48HySlJi+I0sj0SE\nCk/Blq7cdKkF6xXfEEH1CbziIBmJYoDFOUl33m9uZ+l3c8qcJVnEuGtRhoP7\nfVMngGLh1N27MEnoBmj/FjbOSFm80kHFlf3DhlwH7VAbydgx/zdKk4KjPeup\ntbQn\r\n=PYmS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGO56kb2n+m6apDFx3/uhVrgzGb/CH3npR68Ox8qjQglAiEAxSDV74TnAclHZV+iNSJ3DlvjUfTuVgrq8vmzfW3Q8SY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.5f6894b1.0_1602198404635_0.694273338809215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.f6260d06.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NHSVI1H0apEi866fmmJmiOjTET/rHS+rTR7Ghv5vGBz0OdAHKoUen4umDrzHR9wuREsakBf/A8L5PiB79KtmEA==","shasum":"b42b54f3aae8018c135aa6c604c9d8530e89c152","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnbCRA9TVsSAnZWagAAoF8P/1fnaOKpjN3yCDOviKw6\nmvkxuimkl1h8WzAcV3oC3WdbIA7q+qKTxJbFp/up/R1GYOX3e79FR1JuSX9Y\nnratwerrevFnQ7RMjfN/48DtuxSxmArt5snRYfoOPZlZX57fo8uHr7I/nHFo\nQnL087pAck3nbPHzL2VtxOOiSbEvZHHpaLtqO+jAK3zIHsIgi2A1iEeQzduD\n0Y1zC+D2OaNQV8/toMnB/EvhE+3T16+owP8c646hhahnMfRV9JoBu14RW+qA\nRrASq6rgJIM8ZBV1cURGclQR4ViH6PguXTZgaSaJwq6L5Xs0oyOhgjxUfocF\njjR41qEbhVPajMQtYCyLS7i3YEBpbX4S0Z0fQpxJg0zITnqyowMfHbUJ5c24\nXGvcVOxAih7EjOyO1yW3qci2aL/EV6EG11m44acJYaitO+qxlsyq/H+t7eog\nerQ8CboZNjH2kbbm5BoH07upVzop61YKooLWQ7XhWrt5X8/ORde9G3Pc2I+u\nzJgv4bYAzYi5guQIO//m6LY8iwPPupXkuzUEJYhFa+bBa/19984PTM/s/cQ2\nr6ZyPbLcsPy5DcgZVN2f/ouKVdbsvf6YirIGd6nX7JwZGRoWQxt4K4RHfHdi\neP5eq3Y0kiTGTH9w8e1O5ST8Cj3C9EaKw1JTGRpsLQTLvdzC+YV7h1wyVJBp\n8REN\r\n=o+QR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDtDEBpIhyIhohEk7JJblZnHKEwCmiqWi5LiXB4Au46wIgfB2WpKAAtHzFIqaPgZ9RmD9P6iJRDMmv89TM0UHjokw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.f6260d06.0_1602542043458_0.7876916344973719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-H4i1FH2zqcx7BiyrSMNjob4XXo9pfRplBuGI9rIUZs8oyd/ing7ca45cwZSAjAjkTekXWbv0aIY1ZrM/XS40nQ==","shasum":"941744cb296ac5a084af6b5f010e72937988c691","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5TCRA9TVsSAnZWagAAY6gP+gKQPcP4bSWhALwifYNN\n9YlwcKrrd25WUkckBWBvkdRvyZIHsM1/nO0gBrzNlem3abM0Zyhh1TGKIgV0\nDUKIBF6gvj/g0IiaPzy8IGV4JBnoBKC/g+e81UxOTp+T+Jyb1IZp19z76l7h\nE/88FOIl1OJe1+1FRYXQ6UsgN5S/+rkrnbDBo7QAiubhzSCowTFs13OZRKlG\ntypnNV2XER7DzKg4CYqBYy1pGCwrY7k8HrtWtglDdqaHhMhmsc+zXbRy6hlf\n0VHasAcFuv8UrAQqYue+jKYWvAcpTK3TDYKI6lchRuASsCXE1EuqpGUrLSIH\netTLMU/Ru3oj6jT5tUmuhrBNDiFsw8KQ3+bnP81IxiPRAvvTOqXjWVQZC4bG\nAnjpmygO1q4GfdN0oOLO7ip3838eszo3PJrqbBxqj9Utseui8ktFm1gy3piJ\nZQI9j0gVrr92HGKDxatxKnQ1YBK6jfIqjOYHuoK3X9+06UtfSRfConcHHEWK\nijpCg/xJYYRQaVzaf1YEfWPMUZB+58kZCNZT4JhGJuwIPuKs6csTAyrsIAE2\nVgYEZ5mFzOKZc1GJ7slhXAYqs6JNjiqvvzueB7oUISqUuo40pajvWibOENoW\n0f/0OrL95mIhN8BtgnKAeBzB4f2zHGy6ZoXNnhyAyaK9YKzp6ag7bhYUHHCT\ndzg6\r\n=28K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWM/iIykMyqdDN4ItszsxPwswM+mpV0uZqdu6XHDietAiEAlVf+VTVVeDTBSvv0teK7BymZb23Ii5pgoOrY+WEWuNg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.2d1b08aa.0_1602616914599_0.502975004321883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.5bd58844.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UXHJXBY/AYm7yEIT2k2NyRikSLM31iomWohKILBs1si7dc79m5g/JpFRhmRhDv3SQzOJdjY1W1LEle/qgdhRkw==","shasum":"2368834b027448dcf1c431c7a29355f56ac40fad","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjw7CRA9TVsSAnZWagAAfNIP/jdLjYyw69MTeI5jYrEm\nxlO4GGgqlCqYHECdXxnTPhyAWTNblsnNIEG4h2tTLhT4q1ul2+JDhkZVGrgr\nK/xTun7NTfBjvszkWky/B6ey7SfBfryJ6uM5cBeB8GJAprC2KdDa8LxQBzgB\nzUU0xzsJW2Ibrnz4fjBVz+5Omh5N0Uj6dOCH2H92iYhH/SA7DIRjLpV6X97n\nTrmMH2YAbj1ZBdyAMU2xkbv8s+Wxi2CCUlIevfNfICq/kaHVcx6p0HNWrzOA\n1Cxwmyv3ifwFDoEoBk75dhXVwd63atsQk9OsHkDNVdKNS4ZNcU4qCsY/uu2U\njABgHqM3H1ppSxqn6DF4c3W3Tz6FSqSFRRuGiRzeq3XpmQAd7jsicUy8i8H8\nVvIWKadTGVZ/S30SZOZsB0AqEOgzpL7LNxrfI5pSAuTnrJiVKioMK5bSj0C/\n3LDAy30iKJgRXdbkVuuh3KrRP86La2crYBsycn/uZg3QXtOck9V//r41ZQDl\nnCPlwiXdgNXrDF6AJFYzSBIGtergkrQYJJlI6tpRgJFlcQH/p0DjSFNUclG9\nCAHshsDcMf4RMr42bqSZZuknXs+eRolnBLVUxWO9Lf/oCn6FVB4TEQNLTSyL\n/IEvpXGMUpOHkQLCsp7X6eRZN9rNJJ5nGeyv2aHShlADA78Q5HVtQA+FGLJI\nJ1Nk\r\n=JfNQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDG0IAC3efUoN/37lfFRhZLEXr8A89RsAAbaXO8kTerAiBsF7GG2PoJj77Ocs5ff1ZZ0iJzC+rogkaDrMNkVMLM7g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.5bd58844.0_1602632763480_0.11535182541616229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.bc846b29.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-8mebmGuOLGwqlnExLZlslWEF6MPuaCeK80FSR0nnK7kCl/SNRD7edWzm8LAA5SQh3IlvC7zdf0ttqG5FViuaEA==","shasum":"d61ee07eef36e9ffa0a194a3f82a4dd1e65446cd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BFCRA9TVsSAnZWagAALoQP/RcjSSg2y+B0QpAp9b1g\nsEb7sE007Qn/K7VdfyhlLdZPdPtqqhvTclys9/JwvYL73nf4uvDKOoV0/s/d\nbiyH+1Zw3klpwDz/PpNQrKTV3T128w8Wj/JRkapwnNEBwIbKFucLCSGh1h+H\nOb6rS278qEiNgADR4PxOwBTstrHnc7/0RXSXM3Ily2ScThyMT0LPgALpCejm\n3FgfMXkgLtRdjnlHh5Aze+lGBy6FMrr5UR1nxH0DythH1EesuIDdl2/F468d\nYWjYulo4z8MqOI9v+pbApftNf4iV7y7tv+LFFdOCinNUsTTb8WIuMcBcSAHQ\nQN1ag7W8xytrUoa2CPdC2uK8w+5zoGKIuXxdMtu8JQCBUlsbC8V37Aj/iJdj\ns+xUmnVhBPMBJEO5pRTxsG3xDTUa6HIhyF045Vf5MTrSvT2QOXcU4BMGGEQE\nMbxVPdyMbx235bsqeuGMYU4RIFlJs0wWkUjDe4IjHjfw12RggxIfDJyvVfEH\nScWc0j3C30rk6u6qP5kMNwalh5EAdn4mqTj0WNhBVRRBPyWflEOCX7D1svw7\nANewsRGuvrWcFDUnMg7vUl2DuVPTzssnbCtl75i0xJC1+ifH4hEfRYaKHCud\ntEaKdUxAJZaEpv0nDSUqnGMBkt0ARjTt5p6xKV/6/+yg8Ud2Xb/BC2LMZLQB\nOiNq\r\n=9AJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHk7k3RSbVHUipsaYYrOgatfFjS0KUSZBYPKzuaIdLYbAiEAhpVtlLCjF0WDUj6SEkoyA/CC1HiXK+Uwlf4jJzGsddw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.bc846b29.0_1602699332981_0.1551918803117509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.3280b686.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JYDaNYba3ypUMbq7xLr2RIF2bNvPEkAlZWnE/bSliPg7uUcO/ai1hO4AXxCRcSOjUee+75yzNH2mBjrYnskePg==","shasum":"eb307b5f204cf5c6d2f791e644be8b5dbbc073c2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON9CRA9TVsSAnZWagAAF3cP/3Oayff0rac41gJbgXNg\nTGaLzYiuKgX+sIsfDnIdMXesBrEXjCkmOa//7+bHKHE/HY1hmy9U5y1p12Ie\nX9ZkDb3IKUpTPBL2qjrpJmHyPatVjnYcn6JoZBPIvhKjliDkHpRUYlZA3weV\nwmiZn6MtJwsZXVDhXIxg+ybyqQ+rFjogRHhsucVs5Qmubv5iUdZfI+8WZeZa\n3ubIj5XpnzycqYJgmIvQQpNzPUn3eI/KSzU4TSpFWRYnnTshCIyLSsBI3nXt\ng1pKU+Dr7BtZaIPMlRC8K1ZAfL5OgxEt9z+Z3r1vB0Zt0Ypqc1BG6QASlWHz\nGbGFYw63sDkF40zssopOj70p8FtRDa7wiMZbfum7loI64MR6wCCfjAMDz6YO\nCFGTF1RhkZY2k/kkaKaIC7FVJ+kuG5hyLWAByelUdxKF8ilhAimyZeih+lBN\n/mrdDgXc92YbWTA025unFZT4ZdC2COqBNUtTvQNzthNSgzMQFHjkoD31GhQn\nfUy+/HjNeG00cVcUH86wRHjN2Z3ki800ZvlMEjjFXSv2LdF2m+trt+18AKeS\n3BBKYJsx62L0qE3jQsFdTiiTuooYQqE/hXmtlUxbIX3T9llrZFDSe1uAamwj\n1pI/yeanXu8Eu8WVbS1eg6ToOIUG+rp/nUyfPcEJC/FukwW5mpJ+yPIW+XXr\nYote\r\n=3ka3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQaajXGncHcRbg6gzAisXLbaYYNZQtVvhMITT1etb19AiEA/NSdOCQKOpZXvrXTsRHtGuAQtY61dWvlwYyPUOrLatw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.3280b686.0_1602806652921_0.8667001345168022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.9e94cd38.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4WYTiakrktVWXg1H9Ds9Ba3zCVVXytG46Dau0aKcKaet8UiftvvxC/0bt31QbSs2u+nFlu7xAdY7FQaM6Wuirw==","shasum":"96f00fb14e75092277fcf5ab27d0bf39b53acf10","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0hCRA9TVsSAnZWagAAP3sP/0k7qsDTjnUQrgmr3SCx\nsVvhkntcDvHx0f8YAet0UQHuRZs+c5+iJvwEhpyd/L04yoe5wuA2oKNFPv/A\nHYHVmpkjh0j3WHbxD5qkGA6InJsp/ITj24kcqZMuFPkqkJCZEsCfIw5mmvkP\noW9gXE5OSa2/HVS0eRK1+TzKHMSZNeUMNgd6kEjDgAclrIhk9dVmX18tvcc5\nC2LNEOABkuS4AgYTtoriucm6yKtMI/zcV0mnLCM3FhkP2U8soXA38Ee+XByL\nOm2fYK3br6cm9wn2nf4tSzZjYjneh+P2tOwBEw+PJs0FmiSx090CwnF1ck+5\njmk7/jzmGlIamzSJYusI9EGAHEPs3QIo/c3VQozVLqY7yCt0nm4HCkZt6xHr\nxN4gXEPPhgM+S549k3zMr50LuX8qTYEzqioLFk0i4XoW3bjiPFXmQpciyww+\n244PD6jA8f5FuOEkIwnp4ofqVjFMW1uV9DUD61m78nxbjo9nhCDX5IOUVJPf\ncDlspmsR4yVcA6JGWD7OBCD9k9e3zYGSpGCtQXqaovj4or4otfUvzeV61ceX\nwbuTdCJBD6q1XG9qSq3gChtaZzTqSC27FNAFSQJYezwdFdGfEHcrMdXOi0Xn\nvX6I50kiCkHwv00MOtGgUOsLFFFD0r+vI3Ktz4gZ0pos5KR8KvFrOe/r/8od\nwPr8\r\n=YxCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2XjaROlU4kf9y+TbrYRMRfcUfN3pWm7DBNDv18NtDugIhAO0cMJFbBkmplZjc+XNcaRhYYWTxNFkIeTFQZJf8P9FZ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.9e94cd38.0_1602882849070_0.5984817882385041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.4773c773.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-26Fgo2xXjFW/xBLDFdepuZdGE/0e5dx4PyWf1ng9c+gyhVY33xrBoEg5gouLnpLijNAx9W6cMIgci4VRlwv3/g==","shasum":"778b071dde8c267db755687832dd42c586cc7556","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/WCRA9TVsSAnZWagAAs2cP/2VVc8Dru8GA36FhX1AY\nRcZX2qBXkV2WsS794jNtVIT8EdqixOl1oMECy/Mu4gP2djwOrQpLWKTq2CVE\npxvSmgOMK1gVFJL5RIKi8IrajXuNeZrTvzOIfDE/FDITBNilx/K5ShwP6vLY\nT2BhDtfEbhF0B/4lNF8RXkGl8anjmZXeoxeXS0EpRUEJ8Mmmvxl37WI5w6EB\nAzyFOKiKPEY2YHiNdFbaZgA/zta9g+IrvP4Y5oiGXT3gWwxi8VPQqiGiNbc1\new6ImM7fHTRFMwIHY5bh9imWF+fSYBbp/6QyoO13b1Il6xg0TAqcMETYBbGd\nfLpqzEoo64TiKQ9SWNhXc6BpLxbBEBlP3pcna0s2xUsO+RTthGZZ74+r1c4P\nvmo8iPmTaipB6wS75W3sUBw/dwrpA60Zexx9H3GT4mccD1JPCrdWlCunGzn+\nAvrQ8Uc5wDQOXNtFN+z1yIvXxtiCUJPD7VcAo9RHTeMc9vw4oXkwhuQ5945K\nk1MXexQTyAFc81l3RoViqenHJODPsWhZzLD0tMX89g4WtD+LNPXSjKpxFPLo\noUfFy9oVp9oxqx+1PKmyJOOUwIt5gfy7QA3UxkbaXZxVyeuyH98gYJcTehta\n2HYff9MR26ebscLWBnHTEXi4TvWt0hIVGFxR+BCenX63ns/+DocGiPkLIMP1\nz+HA\r\n=BKgt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuWaJlX3X0f/4hwAufSXi4xkRnvQ+Ky0L3qtX17Z/AOAiA7wfitnX/8e4YDDPWE8EmRHb05Jp+RdBiVr4aDWqBbSw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.4773c773.0_1602887636983_0.6476787486915956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.65787913.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NJovbcYTCrz2GkqM7HOpF2RvImxqv3Y8Htr13BzxsOKnNuEKcDzF3+jhqERF5PPCLpLas90x/n6mYPes+DLO+Q==","shasum":"0241466165dfe52dcb562cb00ee2a29377a9f3da","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeABCRA9TVsSAnZWagAAWfIQAJ99RujTIT9igRbovY7S\nDAED+GtUWq51hdBgnjnkXqW3HSlY9WdJe49UwVpZebDjeK9Q6Q4P94XBegvj\nBdc5ibK9o87mvmCROHSIIG3Q7M9k05+lXYM9xptSE5q67aV/5JiyIKXqLn26\n3d0ryrG2UuDkPVQTf17YypO9euKlfPIsqHdxF3N+HJDeoiL/HU/d7CjQtV2q\nRXkEUhlsmDai4j2Uyke8WmRH5FtuaQ3A7zzIgahUlSA7VBrgIcS2zB7uM40K\nzDjeNwID2O/DrRoCJUA5Xj/prni3+i5UsDnKg67aiedln7r5/H8liP3mgo1d\nqvktwNHiZsxXcFUJ0AhMUGRY2MI5Releodvff0K9auE8KantQhusSXL9f6rw\nyTqpn7NBZLgOaRMTLYjeD1TiFI8ov9ghwTxJ4aOtmICo+YU3nuAn6KtvwIAD\njrI6xoYEZhEKFb9CAk9OpHD13QAhN5aJgFlBNe2M2SWY+HTMo0cYyMOr+jKA\nQ6FhMfOJn2G2cKoNXwFpboBZOwdi5zLfmNSWTGgwPtXs4pc9P92vtTw5F+zt\nWNRcTew9Q2AdtZPfxhLJAsTA7TWPjfL8iefSvt+I5Z3fJLzrMMbw2PY5dOSP\nXSZi/mEZg2LYPjwm+Y7dHd2s11A+e+U1pRUFPm28MHJOr6jHgXe5iWgdtTnO\nmNgN\r\n=/VVp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBj7FxRx4Y3Xfb76EEeilLU+z/3Gt8clQM0+sul3qrkjAiEAyeRnSyOVQ+8loNtpewjcKSj15ZHHkbvuKEFJCTZq6Qc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.65787913.0_1603133441400_0.844345222861326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.5485fba3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-0OIa4WXh2icerKKBmR++O2m76tnUY8KAAQSPrxs8kHH91a9ILyz3g6sN9xvbz6rKsO0GaSz+ru3JqPthGi8xVQ==","shasum":"137edcfb8475e6973813de9532f7ade35a80a174","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPvCRA9TVsSAnZWagAAjbIP/1LimFRO1/QYhgvsDAmr\nHJB8T9lB8zCegThqfPVEYLNaS8vnwY3/JMThyN6QQiLXX61wemLZYl4yxcHI\npeQKzh0jn2xUDsaTlY9rqCy1D4DI08A/ar+Kl/jTjtM6q2Y8HclfNYU7a0mZ\nX6+wHIM4pdKwRpNykZJ+9y70HvqZvQNB2ysvBBvO/HFhxpD4XhL7eg6gIeYP\nltCFgLRkhPRSry+65ahrqZ1B2tKavUcwST9waByQbG2KyYWKiWDvtBA+lDaV\nWhUcvG7cEkEhOTREJdwUksn0PfFb+04VsOV05+af77m7FfDAIZiANnBUb5JY\nKr6uMIemnIC3avG5haKw2GqFu4xNpGj9JET+nrvnPrQrGLJciwoVhdr/oS10\nO0kjA5EqhST1Ya/AsR/oz4HgFMBhG+2akwFkak3SO18xzpM7ykDAw8YQm25Q\n2gQLxOFtgpgjK40ycYjGPkUoe0xFPTlBiCdnVO5XeA11hGsPHKYXwXhCENGr\nvsC+XAR1b/vH2q/rfrAbpB3A/gBErMQVpQgDCxc2qpRTugV2j9LPV3Stx06w\ndYxTt7xekYNRy7rfm7Ks8Zm61lKK9Kr4CDcdHIx0akNEpFj/8gl+441pkURl\nXI5Ryyg5YZbcky83LqhW9AYFyd7UT0lc3dz1rxOosUEX9uO6A7v2Q8yav7MX\nOVHa\r\n=zeYs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV0g2uVWwQTTWwF3pxWjC8ctiR+p4Ye4iX5YeDu2Pc2AIgIxLbnZZCQWHbXOIfzpcaXmmo8lkMPPEC+Xxi6mMsA/c="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.5485fba3.0_1603142639559_0.420003547331844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.a39d0a92.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Yr9lzNmlKTApXq3Wf5WrwiRkzVfAdsewwhxfdh7NVPzrJxsBr+WHfpYSxLitonvikRDj7cZgdaraueRuags5aA==","shasum":"0f4127e81e95d676bb0472ed002c97b99292271a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nWCRA9TVsSAnZWagAAps0P/3lW8IGGpFJcM2Ub5g5R\nDVlyeUlYyJszR67iSY3njPG8+KNn/vqr7b6oB4z8JqkxMt0N24nBfDuPXKZh\nFUmBtOhk9I1ebnPvVhkCRGszIabF/bx/R5cO87w9BiNgZdkTOXXE9388Q2hI\ngJ2VZxy8n/h1Oj96uW6HT7vOjLfXqJ8NHAUiMewDXw+1HdMfQIxCfIsKiWqm\njtz2oNfBUpSu3Qj20D99V0G/ZUnKChXkp2E78Tp4o+mZKgSHKXGCD9kVFFNY\nAsS/vyu0x0C4+S576D27eTWe55063C3iBCo6KwMrz8ppz+WgpIX8d4DFvER4\nqTd/YW+q+nTxe6FWSsU0BsLkkvbuCzMNDP5okO2hrQBXURc1eA6TIoSL8t/9\n7Xi/zVunCgZ+U6pkw7iAvhAjubbDnlechWkNX9T7nd4HpJYpVaE1VID6liUY\nqarBquDtt2jRYPmNhO9nBdTA/yLVB9GZURFCSkcouN7EktdbOrLRKVCukCr1\nffvNHMBAvg0Z2wQQFKV1pWdgzYPbQCPirO0LzflAiguhxgmyaGPcXNLZ8kUg\nl2cVF31hUFbl3h1X7udoOsqCZhGTQIXaGU8FWclsSrJ9KZm7+UPzDD9/XuHx\nlzovZReBzxc16qP7QuT6hV0uQZac9a20VtUrRqeW34fjsLES2Rbf1j3ActMN\nOx7P\r\n=aJ3g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmJH4I2XTrl94WC31I2iTN/oK1n91+5igUlQ88VlpnAgIgBmE1+zF4pZYF2potUtMV4gIiz6qW7Da8Q+1JM1cPt/M="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.a39d0a92.0_1603488213555_0.023723272964049524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-sZZFqpQDBBqYt5w/RtvhYjheejeJPgqpUkvqw8pVE2+mAgl1F8JMBVaIexpDFyGmIt8V91oeqMT2keJ4XLQscg==","shasum":"0153b02ed740ba016ef3683dc3933d1d87f17db0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XuCRA9TVsSAnZWagAA7akP/1PH0OdMQk2rlRw5GDy9\ngyQCEtntzARM/TsiPh3WZzPhVxrX9wHUtvJ/74u6gtTJ0WaEwYFuhPIM+gkA\nhb4zKBibYX7PPRCf0dZEvW/PDZeT5RZDnTIThFN9l5MTFtODg5jEj6Yd+gs8\nZ0GmmKfzALKl/QE5a1uXn1hkb41xZVEtruV+s2ziEbZAKNm4xIqwz4SxzBaX\nMpLJAJhaVZQ1T8s9hUkbZwbbf/7DIjHt0egZgp5TX8OPT9HBoxVpkBfNbttB\ndvpW2ADrKwFwIPr01MuLO7J8em3uaEXOaLMNtFKrY9UHwAfyt/7i5nrza9qq\n3jAZ5W3S2ddYYCxiUd5+eh2QKTzXH2bcOlgLkEimNy8TqC/qVngpo5iLCFUH\nbDmOSxgkAqueW7m/WkWTlLSTeqhtk+SSc5cMUR42bwtxw2eeJlxVGUJpMVkD\nEjGsGPdebRfeoZa5lIxwDyeCGSZ47/D9I86FgwYfMdav3XW38gkTBKl41rUG\nXdh84r1BN0HoNLGgprejGb6nIigqrEZbG23z/SSseHEQTHCXlYEbsMn/ytfJ\nBtAa3bpVHP/4hZSZlaBBJqLsQPXHm63rYb29O39N2eJ/WOr+pOyrFbAKc6N6\nZaXCNF6bmy8MO1SSKhvXdH4L5Nrea7nUdgPeXlWBITM/TnScRFiYL2q3Gs/Y\nzrbT\r\n=4nlq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWTDcCb5pzIozedckO9gj6uUCZa4VyTRNfNMWPn9GEvAiBMkZjaQyO8t/Ld3oxFzhkfXl3xwNq1e1K+7FPTdwLJEQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.4eafcbc1.0_1603761645757_0.9336738518983005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.32961593.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Nck1CwXuVu1VR4BzGe/XAlkiFAO1mo9u3xuEg0kQgw4XI9oO8d/g9aHitrT5wwCqGr/qN7YVcx9DyE8rnIKtHQ==","shasum":"bb015ae73fa73eea6d617289b59599fe2702f571","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2bCRA9TVsSAnZWagAAMPQP/RNgdvOJv3dFdGHPsZPO\nwWQxQVGqhxYSlnYxRadmr02kIhuzEikeqXntTF27SwETlipRnYIqc2mYYpmb\ny3x7Cmrk0ka9y5K/mxcaus54rzg7Euy9c3eWP1mF8jbrvD0/a++0YVJxooRB\nQ7mI0s6d8AIobKe/8A3nJgZx5Inle1WUlcKnaPdYeJ7oO7VpaUIR5u0qEG0l\na4cVXfFVlAjCNRpFxkjN+5SYyKSRpHPAMlwNlLRVp8zDLk0B8XgnhmQO6UGD\nT4imsd1nNLf9xDmqrNJVLDN+yuWJWKad3FLtvQ3dp0A+3SX3srHIfaeJSwQe\nLNC68OSU0JxxEGIvPRjC0M7lI1N6F+ARaJqi6Afo4mYm/HF2ATLLSv/s2xyk\n7HuEjHEu1C+6ytoA33WW03UFe94Uc1QCyjO8tW0+qiluhTwOuvRHd7Rzqpl9\n2q3R0tdqPRCxyNB5CXBFl7NwdanHAsOk6RO+E31VVUl252l+3BehT/X5NcLC\nrR3vSL8JkhIrmV5I7ffD3aKvJInlZF2U+q4gadKQ5/xXnZu5WrP3A3D1HopW\n2bPqmxXDCuTdYzIYYm7k8he80qTa3rDnMxjTaQpsl/o+S9xcDrKXcJQJCUT0\nKs9TsUvY5qYOFVDTepboT6hkIqe3NSHXGzORYIaeNziQqhJ10wdcTGVHghK+\nQd5h\r\n=7w55\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDouXW3dCP+jodVCN6RP3yOoI2B+IV7khMcp/HFQr1BwQIgKJRRKmLptNs4+HMR2xIaLlu7eXze6Kn+Bj8yPKVohuA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.32961593.0_1603845530539_0.6243191667161951"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.8e3a0601.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2U+L5Hd/cH+/3OKLzgK8aPpHHyIfHPW9eY3JZTDbzzRe1BJtmj64Bhw4PCkY3fOT75ni9sqBDzwUfMiSrvaTxQ==","shasum":"928a94c11517f55f6fefde3a4625e58c660b4286","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXqCRA9TVsSAnZWagAAhe4P/R2kjevTy3GNPJGamJRA\nMW1KxasIFcUCtkQTwGYaJH1YOSQTL3fzOS2MpQEKOOE8lKHNHuCJCilTr4vo\njtd3AJQPy3yGTcVfwiAsbwjw4LxLsDEB1nECfXtjgGy5yrEwIt0Wn92Fwz9K\nLHhl7xd1pps1OAwCcM8BQ4YE4fokQfTYw0lOXP6786647MZ462MUtxnlpqke\nKkEGQn66B4OVwraE+MHTWDDrq31xZSUnGG5VCYvIOUHTdtPpDcB3SyvekHZj\nw7FZfzYYiJ6mCVXSHT0KGVbMQ5ngzMedfrsXwiUppx0kKLAerhjr7/vRiCe0\npGSgNv4JwCwuTM89pA/9JkFGtlNhKal0sEkzN4PzTn6uSyrC3sw0aN1TIB7b\nvTQoOw5AX5ODhpYeI6XtXyQvad6s0xzauBfhV/s6HA1Havh3+snmQc7HU2Gd\nra9zR8aC4/0vgpgcOfsiQ8T+bXw81zzGjc7A5he/GSSnkMPk6ZZ3IIaopOYg\nUX2T4BYzvpN0Gx5q3wpUeEcZbODdf9QE0MGLnF25WnRSdVBVs5YIe5seeQIx\n0+6ZfxiufwW4I9yBRV8WEUR1MVdrTTB9hBb+UShfzVLDi996APh5+LegAeDJ\nDwcg+N5NK2ecJ45UDUpWZY0hLvFLBs02o5WB8UUEJlQDkmdoH33fSJnuNqwd\nHq0z\r\n=sS+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDI2xnHqlEevyO3u5hh0wqOrzxh1H4rXkWjX4rHRN+kLAiAuJyTLQHdcBSl1Jigb30x+gzmW8fiwIIx7uE3EDMmD/g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.8e3a0601.0_1604007402385_0.9686258941210169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.178c25b4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b3JP4yrQ9cYZFyKhys8zjBFtXem4jPAai33Prm4CttJeEstZi8WvmYSaNaacb07Vx0mwy9k5TcMM02N9MQb7Qg==","shasum":"3cd0c451d27cb982618c17f215f5b056a93584bc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkXCRA9TVsSAnZWagAAs08P/AstoivS6csi9HvpLX8Q\nO7XcSwbmFPGZh4HmefqPGdOn7VQdoUD4FXEpbFg+npCxOZsMEBu2Jr+SC1Qa\nbWT2k8LGB0gKzfapr+DzfzJ56WddEvYiACW1uDr70TJLWM3ZI+mWuqeBcEBj\n+6BFoWnVHZLP1mEDLhmSLYFVqwpOy8VBJBdTwbfpQ9wp/Z0mcD692WWjXtGR\ng/nqqZey3EYV7FKMaQtsO3RfCQFpNpFuRD+BTkJ6N7g+6Vpq729ZwQfiSQlB\n+dSkdXacbw4/XjU5mnW3j7Ii2oBkvOsUGZYw883L8cc+Qq23+revSryjtYVy\nMLH6MJZRd7Y8huDqLt3Z46JYahEd092i0M8iNevZg7zEvXhCeZzIuKs8Nk7Y\nJ18Jk7f2pNTPYO198FmuYmDfHXr0sXKMmomCt9awqo5HyQqEUV6B2vZbNgPS\n/srZa/bSCI0LUbW0oe4lW9qKLQkoWYQ6N5tp5reeaJluecvAeAQWa/dHap+L\nfHLNoFad/GOLUYs2e9RGPqbmeANZ4UUlMVneJ/y8xOnpP1UhQ4fEur313Uhy\nG/fwjaujWjhS8xDT0AWTRyMOg5s4453RcpqOTfRPMdKh+lQu14gkC7K5WUZw\nU5L1D6hopZPeg0fn/3lwoiYCOE585xsaEQ5AmFwL7rbVDArkUOvZMoQwxALu\n7xKR\r\n=BRzG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+uz2ilW6cK3TrwFXGWQ3cfGENX6Wk6GwuT1PRHwVs7AiEA5AJTSOiH3C+LG33YNkipxiPHavULPy0snGkMPWOc+zU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.178c25b4.0_1604008215110_0.5954037438892033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.124beb49.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mRyFUm8HMFws1aYSFCDRD0768TphOcPDlaxWNjxLD8wvKjPk8afqsg0DN8vngmP0HWpcMQRI835Ufk8QjVNtXg==","shasum":"ab314bff19a91135721a50ac258d0a0174eda7fe","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKp6CRA9TVsSAnZWagAA82AQAJR5yXMSiQe4aTILnYke\nMrxjO/a+i06npryJHBrfUfn5+1z3N2tufxBsd69A28UYfXYlwFzzV2FOy36P\nZvc3spOIrv+QRFUfMICl76J+SpkMB7kaSAlODuagcUgnvut5qwnasuWPkEj9\nimrNw2BoLmU1n2aj8vNJUb/tyv95Va/VWqk2xZoTuy2p4UcZii9YwCY+rsIe\nhRWrLZh2qk8SxxgYqJ+AjvO4uLVwuMf2+fWt+Dp9uNiHRk4Mo45mVj67Al9J\nO01MvqkAwESpkBWNjEiIhIiGpPAZys960D9+bslmge8Q1aLHWXS3vy5On2nN\nBI0yhmLOnTqpD6C4rPtI9Hai00yYPSvSsQqpZ3tTP4dTXyqcMnLBxLb1Qneb\nW+szGGTiNdhB3nIcJo3aHOwRw6CcqpNPu31KzlR5qsl3cb5c3vkNw7eeC0rZ\npzmrib5tcniILaREqYpARj1j8CN+fIiNeM7LG+YvQeSscuxGgS5NcW7agccL\nFRKAt6ESq1k0e+yfrE2eobsaHvi6lYyrocRgzX8+yuzm5U3Ar/FaunCIUvYO\nFhQM2Nj73IslRSUAQFAn7wNTkPVubyccuVvYlNjH1e0K+HZTCVvF2INeTA4Y\nggzOiBToTgxWnywPeiv+wkovlGvBZZaMkWLiYrSCokkYg2BWdaAZAQEU1OrE\nv1LY\r\n=IAEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8NDrUon1Xf7G4tYQirGmF3ngYzy1iW9pukl5nGoFuqAiEAlp3H3xd2/g4FV4DPyfdLA5ZZWVN6EY6zuBMizOgA59k="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.124beb49.0_1604102777933_0.7922691229507108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.5937f468.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-K9zGb4do8dVB42tyrzNNbS7pbbx3v3HmcPQR0qcJLZ1R4w3X1+g9BTCPdPLYD4V86xNlB0d8YAMX1PVYnHaacw==","shasum":"13029fc41aad46bf675a4b4ee7a411e236d27e28","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeMCRA9TVsSAnZWagAAEEkP/0LTiMAp/OMxJob/upRd\n+v/MRpMVvYzmbLPx8B5DHElthXZHEAbCqPGY1Akb1iIzujgLdMIDfPLvFzSa\ngNCbwtmNWpkfC3pAZoI6FUcnSIpU7mjEqkA965MVXevlKDVcqrmiXkEoWR3x\nKumxyKYcZTUxKu8gJVVZNgXzr24+Dpz0k+PJfKaJ1BvKp/uKthNnA5ZvAq3l\n76pxu7F1g9ZQatBxgtQB3wUiURIvQ3IBntLU4peySwuVYgUB/ENjSSPbi/zM\n9MFWqzSTDS+IASPhA0d1g1SRlft/4+2qM0SJipWL8vYeuplEmbzMwOiFPe8R\nRcQJqqOqUiZQaDm28vQA+ra7vxc3HGmYMOfGSXMEn86CeZ8A6ECJEdI56QN2\nEOWp9tj+ZsYN4mh4GVt3/WAVcrySNJzIB0MWwp/vqONg/UrFrFwA9w5NrtWE\nSuywoi/Xz4Dw+tu5Af7kVzo3CyswESyhlp7+zjWI5uEWmjxEajN9cMj4txWw\nNIq0BGJs/KQcT9zUKrUsFPiAWUELvCBFqp/NpcYtlIt7q8zfu/qK9TgpbFDO\n9hE5ZqfVedgC8SbVHior+UuKBloIEsFy75Si1DW3IDN5Q9Gg38ZOrvcbHyNZ\nh2laNb5OOiwb/IJHKQ2MOC590jCwxDuTHW+RrBjShJoLvyH6DD6llyxpR12B\n4F+r\r\n=/mP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaoVAj0x8u/KBeigLGm00szOkX4BlQTTumrfSmF/4ZzAiEAmaO22U3c03kp66W+CQYb3st9brj56Orv//fuw/n8UVc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.5937f468.0_1604523916392_0.2944362991881584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.a9bafaee.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1RWxW6ESoVAyIQY6qSSZI6UTzwdY2zpBMqjzKJn2jkRo8By5bT8rNCnjZLBeKD7O6HTJsP1Yvq2sZ6Pp2sjTCw==","shasum":"07fa2cf3e2204da41c0c2d6e96b5b3119d605eef","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0JCRA9TVsSAnZWagAAjqgP/Rbd4zRsNrtNOAC88Qjr\nXdINIAnGTWB1ejozS8Qid8PoCRhnVHT0PJSq0h5Gb+iGDHRQoflzve0UrDoX\nl/J5I9uQB/hr2yAQCz5ILagZKeeF3fXNF8/iM/f+qsEa33NqNB6XNulpz9jZ\nsxnnB/LpWe1+0bI+Zk7ROk6P3erKUAwMvZsd7n+1s/H7O+nOtWxiZoMjeHWe\nzLPoHbK93mjlLD/5mrdelud3GkNHbiivhWZQDfUWi6rBPMViTYHN4oNXg8S0\nf86G60JMCeqVUoz+3PZ3855kdgq5+zyG/FK4kpP1qBZOL7ARNgfsLXU+kz68\nS/2rD1FGQR1hA62O2hYrcS/x/aeGKPt/9wuibHy6vD//13vKR+lV02lxo38L\n8leQ1V1dxurtNDDtA9bKaghlZ0j+QB56ujnswFlGAfusoxz1NhbZRMrdNS+W\n6Y3jw3rQXm6Cpe9d52aG6oOOF2wJtlwfvRMJgtYoIhb9U/bgiSDEFLeMOehV\nOKA0i5Z+8yFIAO84aq18/v+ynlfUCtKvFcYmY93pqaTOHz6G3tNCZ+ar0Xd9\nGipYh1BpP3lQab2CQAL/UJAKX+1cbvKd5R3hlwk9iIuVz/6Y6IXNup8PHifQ\n/SMDTv1JHg43gIEQmi5pgh3AvXvpEmo80AzBZs0UnzoAtpIfGE7p8wrvhaJM\nkif6\r\n=aZjx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsfkX5HrgaBiMK7wCJL2mDLI2cFYd1MKVHFYQsWXP5IwIgID6hZcCGZrHm23eKxifoUii+AvhgpCp5ct3KzkiyKHY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.a9bafaee.0_1604615433051_0.17520908045562322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.184861ee.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CT84HPvN793dGpaiIfarQmgTO/osrgiACIlzyZRhRoC4WIDQ73wMUNS2dHAzgYEpf3V9CNbibE28m/qfFaU9TQ==","shasum":"bf2f2bbdf09c7df774a3a4fc09ba6383bc526426","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexICRA9TVsSAnZWagAA754P/2v2cfcw3dLSQTCSBL0F\nu27csIkXRbcunscBf5Jre5RJ2Ycx5vtNHLAN7QOjTK2VyueHvf3NCSAiGFTH\nFznSLMxJ8nEqL5lolSI1xXyB6w8HH+xJYd555F5OgW5KCHsk1w6yclM0eY2l\nKgqxtrcXqhyeBPWrXXZlxNX08Z61RWc9GYHbj/g/+HcYAgesRseexgfMn5Qr\nbSJ4vyz7K1zfWLdbXqU8HLzPC0gzPFhbjpFsiMmx7vcPu5VC/r/MVN2wRozU\nbxkZ/MPuS+9K86R4AaMdTiymX2oj14WHV5JBX3yPC5M8fZA+RBjB9RAFEl2v\nIMGVzOqGSKIiPiIOsyWMVcgCNmsXlzD/nqJg3wi71EBO3Q6YAik1tHQziN5u\nTlh6fjeLhPubbY6Rsol9ycohnqLsDmhXGyTTINe9/YI/SODYyma3HPGGL95n\nfcBiT4YCCCT2pW0jdJFjMTPaTKM5hYHR3SGvnTIqMHwIa7oolccqp4QdfXB/\nbj943TPc+Mk5mtVf/KlqMd0u1shg6G8uHLo+hAtPOlkeareTbIAzNc1j7uBY\nCYUupMTVVXOlG5PzPKiEwFCysQ1Qqw43h8hWH9cOu7N8TGZ5P2D8FYX87OyU\n3QNLiFBFGmLbAEmL6V4nIeCGcnpyXi473Q6Z4lAJ8S5MBBHykm8Aebeku8oM\nT1gm\r\n=qAm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9aXZcRrGQ98LThXIrqzxDy9n7JGajWg9JkL8U66HA8AiBIQW0NUWkYecX0JlXLAF4+IwrbofXAEPu4uY3EOXg4pQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.184861ee.0_1604709447871_0.043146542658056175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pyHn4WTBHZ5DYJpEn6gV46M7zFOxu9xyzVmKGYRvl/jlz6b0HMkhwWnaf2UvZmdiiJkOO6t+PiN5lYsGx/PNWA==","shasum":"54834024994ab25a94be283e21f848ecbdf7bacd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6fCRA9TVsSAnZWagAA/oIP/ic7Ew8tcNRI3Nn6NaWv\nYaH+tPjuzdAO6TdmC8ub7Ib8+PvdGDuCnIyGaxWKR2pvOjCbMfscijBF+K0M\n+Y4v/YksPNYNC6K0O/l96HPS8CAzBRF2M82fFtaGpm3GxjfOq+1Joi2R9hzt\nKGO6DY2V2LXkKa8NzQu6JvdwUruWNE8g8JSvmRZmklqPlncrRKRwSXz0WErB\nLXt2U2hzlHg76AZGILqPEDg5sm+gPss2xrbmKPGmhtnueBybK0hZ5O6aNvNL\nz+wc4xSOiUGDNULJeHsSWeVSuRdVAzusxZG3zAx8nQGZO//i4YFqjD6KSy+y\nEwv8u2gd39nW9nSrByYW2DfF7WMo2n3MrH7TSBwsx+ShPu8MypGb/RnJgzbV\nTfB5fYjIzl2eD9NzJBZSUVoCQHX9imfaGJPm6ZmWbwuquYFdd9ujCnRhCK/d\nMeuu2gomCxbq8kVpp/CZ5rLRb6Oq+qM9huJdacAYRH8Xxm3arGwhONr5kWGL\nKM42HQCztK/K9hp8hPFhQ51O00Ou/BD612pE9oPVsauqACWbUNDl+xopE0r6\nxPlXdkNrGx4N1ShL6OF93/aT1L7CnN3dbo5mvB5hevd80rhcOP80s6+UfNDO\nNNES/HETGXcrqZ1Puv6Y5QcSNK6ig89+Fy6Y7KO9ZR2ZPMa9udbb//8lh4Z2\na9KJ\r\n=bVRi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG18iN9H6foeO5nS/3b28qf3DoQ+8gxG3c+sG0KpMikvAiEAiYqNopiDq0HQGe+COJU7SnVQ39IePj+ivU00IlfBBeU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.6c6ae2d6.0_1604927135237_0.8287254545616238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.ea2aa477.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ggLKh8gdKnFPqDmu87V5tUjd9J+oWKp2jMtf2VJsuwnD3xRDo25lwX+/9YsdK7jIwoBQNwBByquoEfoaCnCIQw==","shasum":"ef6c6c06161edfb1caf6b86753c7450ecd70df51","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqddtCRA9TVsSAnZWagAAZwQP/2pKbw4EnutnYElpt8E7\neIQOv1P7Lj44UKk/a/7c3tZa67hV6j69OJDx0vDWvNuWfheCX683y7k/oL0N\nlobP72Sg3S5mMjriGWwjXkGype0Qw3uHJ2/PUpuyIcMRWL1NDAi1hfOsN4hC\nztL9Pdoeh8wEsKeuCChGkr+3GJY5qLd8N0GtVPWhFclm/O6BYRDOiClEiBoH\nbo3y0XgXK+LvuM+ELDl6/dpksljDzXVB0eiLojklOmbW8lY8qEBqPyp15OWX\nbIEOwX5MU2IDc2dfkFsmERNPCzZE3o0IN56VDCTAZlSPsMKxeID5NVWGVxZd\nmaVwKjb0fgMLj+5MWnwlaoS2LxzdTokZkxCJVXnnbG794WNRxpdU20RXpYBL\nYh3q4DEUdNaCFyrXhR/fEql6Ud5UKQZEr68b6HZ5uyjH5LMPnv4tWPvksA08\n4oLCtzbR8Zf/fPmfcSI9uFbYyV2lhHA0A9Mhm7cbbdF2xVpaUIbRZS3an+4t\nxqujn1dhLYxZXCNqlaBh8JnMvb6nvGgIr2Dzlr9RVyv9a3uQTzEpkspiA8h6\nPLZjuAf+PE0LLDyjUxr0JsU3/53i+KzOj3iUSInvsYNmOjv02Hk7iLY26VnW\nfPSWiSmPXEEVAP1KAOsIq66HMZIRmRL385klYEnd/cgqEPtCkMRWqNMS/E4P\n+R74\r\n=gYPy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHApvdwvodP2TUmBruoZzWV2rH41KI/oqxEqb+0qycQOAiBxJ7onRJ6MakZEBmJnGQQ9XUVmjRnovaHSdD9mrlAB0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.ea2aa477.0_1604966253375_0.7613978172518754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.a2c088dc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lDsrgd9xPDcSVh+DU2YUnFwM77vUd/ZhJ1arihkU9weXnBt5R8J7Yo3NfO4H9/eo1s1gG2LddmrxMUq4NhFzZQ==","shasum":"5570aee6702c1617a721db6d92da6455f3d9e99e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJ0CRA9TVsSAnZWagAABzgP/jpEfvBWkDYNYWOyxLYk\nXl0awTCsoUXHA/tEYKxphL56Zqsvc7jGaVm0rxtzAKWTOJd36e/A8W55ZfjC\nZF5dOnFGe8hlKJ1Hs8MEHLMzVatpY2ete9vLKrxz8nhxu/89HTD7mpGpMZ+X\nhj1YVAwLolsMmVyhITzzIIa7M//jdLEZNDW9H/LP9TgZiylx13riB0OiuQFw\na3p7bIpxOh65YvNKBKuHR4m3wkHRKwY64fwapmOXf8j+EO4tjEFq8Wn1ld04\nc4n+SulHv0m0gV+W3LLQ/iMWYcy07Vk7nggpNFi+x0K93LEPMmpf5F7nMTqs\n5NXhX5nWDmOvNJKptT4lwGyMl2Awrk2ssUDIn9yLrvhr9kF4LTfDfwj0uJYn\nXabUl93d2XQXNoU9OTiKImf52FquhuB1xSCLvMg0lfo7nmGWhYtbriksfc/f\nyzq3weQShmkUpw7X7iI8xLmTYZ4jtYfNA20Qlcfwqzf11hIcogFQflU7v7nP\nIxqLSHhtKD0A01Yp93CfHdsQPB9Czy63j1eQ8z00zz9ENy3tRTeWlDK51Ihd\ndndhUK+4ilr9+RfZ29pcNtvEIxRnvN4EtbVperIUfb1tgRiXBXNKzNmOPkJU\ngVR4Y7Cn0vsNfJt4pgXttKLX8s2G5s+MiZL06hn5Qxlpq5xtX7R85KzW26CM\nuD5E\r\n=UyQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFzdIcEwDit3/YYawBH8x+Fmum7sK42TQB1L2eXzmJ7AiEAg103UrB6L6FjrWQJ4SYRQ5k68/HaHrrl4E4+7jPoY3k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.a2c088dc.0_1605018228370_0.10423846999086073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.b04d71d4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ocbrsuX/fhz7tVGZfRhaMF7FniWf3n1hyi/qsVxZSntf2zIN5fSHf3MgojpVU4ojVaEpgMwgsEgGUihzqQlKbw==","shasum":"e3e3b735fe739e25ff800206c6135d2ee34a722c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFrCRA9TVsSAnZWagAAIQIQAIgdRDv3qrHrsO0P0wj4\ng1+i4YDl6cIEabBMwOCThxyCuJoMMZ7hBL0fzQ/sKFwKvYaCQh1Oabn8j8ra\npuH2m9385CgGBa6CAM3lEy6ELqnb4DwxDk3aHu3E1q76P8lAGwCXHHc3MYa/\nBGShPBIef8faYd93COql5t5UdovHz0Qf4zL04kS1raplH+UBuCFgEE8TN6ZU\nxe4Q30gdf8vLtGCw48s6Pu23d9s3d/lOQ4Zi3AF2Tl+cksdyK5Uw/ii8rxwu\nYJYjqta1AMbdQ2Z2lqqJsfk/x0OuV/hi0krje9QffwfPBt0jHJvgXUhbLqiq\nCgrgeo67Utb6zUDncr1pKBseCyBCAgo8QD47e0Sjw6om+ujiaqGfXAswsfK6\nX+FaNrPiqU7rgN6l93IRWi0ZvOSxIKvDXQ09JxkLEpjXr2Y79xBGXVj2Wofk\nk7NWrQb7CtjXjGp8ZMI+MJagxOLh9f1be+CafA30TMapT7QlCVeewgvu9FSV\nRgp81MDfQP5duWDivxpwoO8K4cXq0eT0KeKiB2t8hKcjmYyHCj0MKy6hhqV9\neKuE2TMLKjsObCM9F5mg4SYsXG2MjeTvdOm7C7O2IaFnNB/5nJW1dm74MKwU\nX/XqgmrMOFxdvkHB3KmIPLyt1TlnY5KFr/tw7YN+7h2xD92B2A2O/F/u9EO6\nKFcJ\r\n=3usG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClmgZyajYCg+k7pSME1TsKaV8gM4Dm5Rquu73Uv7BgbQIgOAwu1exntXZI1rAIw/qlc4Gd9zjWB1jx/D5gwfHeEZI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.b04d71d4.0_1605177707119_0.5215318002292799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.2c553352.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cNuszuceXgIEeUZQm02cqdB8UnLwjmb+1aRNzDZ+CnAJwE3X9jsAMqKTR/Ixsp2syse5whSMLKq5ULVqfKjPeQ==","shasum":"6b8fb8fb816f261e862b8c2dbaaf849bc7633ea5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpUCRA9TVsSAnZWagAALggP/2D1tO8vMoyXQQkJmp9M\n4HH8vquyvPxZMLjXJcMwZD1o2NoHuE15rsD/KVyCYd7LWPp+iUycSdkJW3Is\nIwjhVID7Punq4Nb9ZFBkFZJVRYB6aWfC8hj/YVUhxshG5W8KaFZVNR4WZfYA\nTresaEthtM1Sl2SbysWea9uYncJStfETeUpNEHOm/Kiagfl5VmlBWHSF+/5h\nHjrwX4Mu/6RenO9BF0y89s5oQ+cAqZsviXCqdYrO03Tftz1rNOols5f8pNLT\nXOLQAIWeTD5594XBgNIzFAvrrPFk2lp9LBYZ43Po5hy9tkhOHdhZ8jo8Ah7S\nkAVPu5F9Hu2RgthrCWKApkokzo4jqPI5+zvLBRVfZbsquKaH1J779OfHc1Yb\nEYXZ5YmGC+y/iKuA6x4P2GXJ93KZHleRpIS7yMiHXBdlT8bEciaNoFFWTgha\nQtc/UGpwS+XIjCSK+cyCTxSNKmON0fx7xtgLBR1tUA5XlXwTxJayrjIVPSfK\nPTsJ2t457j3MJuMRsDE4iLmTi9ZtbIRUVils5k3H3J2DOsghsRMuoLJWWoUz\nwLI+Fi4e3m7kHVBvXeB+YPk9Gw43EnhSAGlCYpBslJESedcAGCVNMi53fng0\nlYnnYqIVw8DRn1XReJgaCTLFQ1N4IPQmS8gCys9Dc+1LwoIxJgiq5n0vVOYp\nwoJe\r\n=TQrH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZFYNBQV8+CnGSFg9/YNyjWapMulj0y9rS3z5x5LrXHAiAiZHh/fx828Lvus6Ojqm9JA0pb8WDGUG+0pD8rg7hjhg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.2c553352.0_1605220948072_0.25216550410854777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.6560d19a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Kny29wd1jBQu+IqKzkMR5rjD+XCfeOx7NU7/kPu6RiJ0vJdwdTBW0IWdaRrwCK1hsLjIXShz7ZDcBOZiVbq68A==","shasum":"d4cf0cf0935ea86e89a7e594c72402a077460d40","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvELCRA9TVsSAnZWagAAAssP/2wpudHC52nbUh01S2q9\nl01idnSlanCeiICSzo4GL0c/IvS7svXByg7vOyGDrij5S+N22phpR3d1ox55\nnFmA12cOS+VzfmqeLQTtKLtRGGfPQgoqIRwKJbnS/gDGw0cXo5Euqp4D9eP1\nfbXj51hHwOrSysQsv9Uf/SB1MvfOzf/I37EhGv3O7QlB+9jM7yJ5UELqwznX\nWvJnu+MUVFPvOpmQrkJplDxH3jSUaPAmL6iLuKEvEEkb3xEg2q0ChzdI/Hvb\n+Y5h9RsP42Hp4WR+at6RlWtZt4Thl38nqxXUl9n2yWjlfpvF0t0CgNnEd71n\nLSn4Es8mSEvRV/Z8iUyv3OqFe/1v/SegEb4+aqGgbWiA0gWY5BO2DCWRdJTn\nz6WUhoLQzd4OrQhX1FOUGCevkNALw4kn8YdXpIKVvq/rgSWAxNCzHrnr+fNs\nhOyfrITylSrQOXNH8vZ9Gvj5OicTa83FBlEr1QGZu2DuNK3rc35l2DQDldxd\nznhqM0ZmadvFPLj+5d1xCssPmUfbXReQzyxbdhKHZUyjn3fUhILuQddGTYwq\nc6XT4x494E4kODASedk0xPtM0aJSwFwG9y3Ow9peUOjThGJPftMLAu9Q2yzK\nKzaJbKxtE984qI+kFt3luzSW59A6bYj0YkcNBgX6ZtF3KJeq79Xu6az/ZBdx\nbNdB\r\n=x5a2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4iWWoZamroX3asV439t4e5d1zKdM4YHcSo5wLqb2vRQIhALyOQ+YSGYr2OXwmp5oOzfv3eY/nMn9obJzCwj5mp8Eq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.6560d19a.0_1605300490588_0.38948815442389595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0MOezqFJHqMJZC1WZHTiLKCcfmhdcIZ08mFgEttd6uv8DPEK9rTLLY35XdvCp70Bs1haA60on/rCP1ecVCaWtg==","shasum":"305328117363c1a2cf0d2c16f5fe20858e8d097e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+r5CRA9TVsSAnZWagAABuYP/RA66JynZLy0v+YL4oCm\n5oaesKT7IujldXKrnQL4V+4/jRXxn0d3GwAo9AIvsdnCS7+fDlNIiBh73lei\nm1Bx4RU003pyZ9Sk5hwx6rp2zzbmrhQeXoTJkAmSdKQiXok3cPLqOByIl2O5\nnDXms0r5bB8tmObe0movSXetz6PT6+Mmj4vQqN0m9+vkK3+qdO6Rt2z+GpHL\nq9TcaBYrgXQvm4KLGmtVeJkyzv+V6RTkvfRmFrblmOLPZcyGk7jjxbUP4z72\nq/taXCU3he0Ygf2CghhiJYW6nm4lK2fGdAEgQMSlwvpz1jTimDxnORQzgBeM\n8z5+4vaU/WJZ4EUwtGeEcn4GAMl4fZxex2nE8Ncun4vLuBoGGOTGz5axWOf3\n60+fWYzL2sCVAJIyw/IGEgPv+MClOc9u/dFKX0n1HoqeuTFApQLmN285iZD8\ni9Uc5bBlUM7MjnS0UsoqveB9uVIDudrcvuc1MaXjhq617MbeXz4HLFDtgzqA\nvlD2Hp2CLMEa8/gJqG5k8nf/Pb57s6Yldtd9+SqzfZUg9oP/iEyQ1ssGFv7s\nzDXe1x5BIsvg0HmuqUFR1FIplQDLglAYGU/YRrq/x4A873jFY7R+pB5d12Hx\npjyQEQ5docPA1WsXZvr3zUYmTe/vzO/nVrcgi+fVVktloVhV4hNlYgzk2zmj\n6wV/\r\n=PKv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD86aSYWM3iPlA4s24zi3zISRgaktw5iPBg7Rym4TW+AgIhAMSAIHzDRP60na/hnpmdG95yt6oHQWSvHbKXLYdphfn/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.a28d5ec3.0_1605626617315_0.4546796415604093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.03e7e778.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LM6sDUpi/qyaOSAnjIqAhwV33PUc3ItCkYUGZO0NNmCedfTx/PcWRDSsl1/4FpF8clbA14pi4xK3x3MvxsTO0w==","shasum":"8a24d11589860cba688cb028c0a7598455f959a7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCOeCRA9TVsSAnZWagAAIt0QAJy0FeDm0s16N77zcs6t\nExYr/mS2PI9zGKcnQ65dA/AIzLkPdOOnWe+mSLEjuk09tTDn7ex4iOdJkw4T\nBNqtDv4ZWHoof8X2KAPENGAXnPb9t1A+LHt/LX4UV2M2yUZykHtbGTVc4B2i\ntkC9qgrauHwZgY+MVEXySJgNwRcQio7dWjKzUKzIkN8Y5QAdLcdpFE6z07k7\nTIdNDK3diaogRaoBmwMPnou3oD2f5W6ZqsoI7QT5zjqoekd7fZt0zZxS6CPi\n4vxExJIZZd/3nB8xQMoJ/OAJiyVyxn1AUcvO84Vw6AoTcVgaKyO1G+0rPJV+\n42vicA7qQLTEn1ivoTeqLPnSpBJv/JCHuAJbRSG8TIB8ZG6zRxeKxwJ2GG0Z\n4An/2OB1nKEJyXmecxp7wfPcAPlER9NIsGTTKdJnNW4RZyFxj3tpAtIvGxck\nosggV6oaC+HMquEi+qHxqEV5EHaoU3OBJ8jTId6Zlei1FBB3cNQLoj2zW9B6\nuY10mtt5br+TGlR8Z0uHu9juLBFxbB01PABLvjpr2muRx6woxDi4ULZVISoY\nypmgw8TaO9LJ/RIAElatljJge1085xJZYfpWCvzyYFNeVeQbscI1B//tTebs\nmir1NxeoUaqK/yytx+kiuW4xC+N+DaPnrH/oY8asQmFP0js0ojAzzqBTY2pX\nITEJ\r\n=VPow\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEw1dJZ8F3xQmXWi6MmAY8EVN/VHlxLhFF/1F8B9mDuwAiEA8szJ24/Cb2lLq53gEZdSQeiQ6eKWak1CFyQrhBCRUb8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.03e7e778.0_1605641118107_0.5501728886147816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.ac8ed597.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8aZ9IauFP4//tmYJkV1obiVikjrmhf2QUwwgMBW0kSaUC87T/Yg0j7ZLd20BqnltdbkH2x7fJuZr7MW4008+LA==","shasum":"570db515edcb79118634659145c095b511176606","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqQCRA9TVsSAnZWagAA2g4P/0N62se0xBnTIe44Rmq1\nzA9DVLewRobwpenFFKV4TtRfIaU/D2b4ZsIWX0N1Q2+L8OJkLkUB720mWCpZ\nMmSg5uzaWRmM5r2XfG4+e7SBfTnF8yanLP6ESorR+PMXfOmf2seL+MDD7zdT\np4mrihKFEFaRq1fWbFPn2vBmtdUfJ6ySgSKLKH+6WeerZ4Ao5Rw+DeT2P/7J\npnGIeho2q+8kNyiVWL5I1I+l4jP1PcKlrWcgAFSkqJoZ5C1/x4AP/G7GKmzt\nzYN0t1W2nVQAna3dbh4UET9c6h5dyHDYfKEbGsJxBd59FKuOkQNmLrXJ3hAo\n2L4nWoVhfcR9DkbraPqjXCKcqB1i1k9hSkr5THJC1BtPJk+CMKXYrp2Kt8AQ\nuz1djG3NdyNkdehMGhBr3kR7xKfbort8+Jdc8Kuzby/Aggi6sZYELZDny5ZB\nFllZIVDY0MBmcdT6qq+rrgI3jZgbHc6Y96bGyeo3J4fjPE75HlkcZ2e82SR8\nU6xNyHXtyDXlF6oVqC75gcGuvMj4FNzgHr2KSFzeByGRdWPyeUWtZPMw2R0k\nPBNdGy9R+1/BJ87zvPHymNeJlxwtJ3XUmvmX/ckng3V41zXzdzjrsy13oYm4\naoI8WjNlXuf2xQjcXxS6MJ7a9TXpP4rcIwHxuYxlz+SP4QpEiHWAuE1PFyQ4\neVfX\r\n=Qg2w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoYuFzLSGLwzbVHcc3Z+pK7tAWLxd0XLhgNdsBNFGlOAiEA/GY9Cv1vt12PA4gu2wniAp79Ezp3gCXG+VCLGAs+PwY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.ac8ed597.0_1605651087478_0.43424644702676773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.b6a60f60.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UZsx1h8Scj6YwHG953/Mb7qdpl+rutscTlYtpSjJq7/zLLuM0RNPKPW96jLiirx0r7rqlixShCwYQbTtW9Y2wA==","shasum":"d9442b03adbf727030944b35420ad5d845e89b65","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQICRA9TVsSAnZWagAAhtAP/2mNQmgBMooubDs2/b3P\nzjyC2+l/BG3hgw2y5I25P8FK9EYQDMChlRJ1L4pmdkR/DEAkZZsbQ+Kz+lxH\nIErE+WL3FGlNmbbMzlT149hlqyZptS5RXnMGxwHI7M+iSIKa8LjH5JGPS/wV\nqnXa+J6fFywFJFf3qQvob11HH3h7Fd3xIDCC0igeNGn63YEgrsoZxclsILSh\nl5aJFFnMOO8Xi1SJgakYf/08QAsnAYs0xx9EbbEbD+sTPzo4Mb165iGHvqRp\nQCFMBjOaEzoxuuTtCDt3gtwrsSjcLliom+zkdLfHN+lg0VVTE4M792o91z8O\na98wqhNSSyKLdDxW2D/li+7Ojud3BMXROsF2J1js4ycPvydJrb/DOlnyrOxT\nYny83ntmN3KioMcX5E7C2ktUNA5G5dN2SU8isGz2S6QRwYn/N+5laNdzL4SP\niqp/Y7Iho0QODvV6ad+oMB9AtNA67r68e35r3zC5bZOLPbqVLwxLOv7WPTYg\noW1/49531F55XU+PqkiYvJoiUEgOKdmQRezmR1lYQ99/gaIe0Lg8npTuBxJq\nUh7CqDFHpj5kNhdZ/qhkiaKWE1wAwq2nSmG51hqgR3z3FxYVufBg70SJNFuG\nQbKRTEnvfQ2ri/IrPrVWYaovvAN7iVkBGmDdjTH4IjbH5dF0OfwLmyUBxcrW\nokgT\r\n=sU+2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5cTVFZSRtRNeG/afK407GZkm82bhXAYFFucs//JPZ1AiEAi2JcJ7IVk8SthDaEArO4eU1rSCd7tAa/B1lcH1/8vMg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.b6a60f60.0_1605653512407_0.3718497874266127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.71cc24fb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-F+jC/9nUQPrNa0a5N3xs4B2xthhLXTx/qiFUPMJja/0KRZ+DTs673DsnnpMgbp6yhy0aTJmzI0K6wAPv1zo+mg==","shasum":"b3e2e16462f08592acae844ef7afae3ff58e62a1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnHCRA9TVsSAnZWagAA+n0P/10IHavIUj+3iYcda53N\ngdn6pHWBe2V9w5qhnyMBqoOfl0JdCVeG+W6pDq3MUJLa3Mc0iLPaULQNM1z4\nhNQwyBhDcNP4hcjZGLF8uqZegTuU/Yci17eV9SG0Uf79TINee02KrEhIq05U\nBLJuWRR7Ric9ECf49Tci1tRIe+V82HMibtri7ivpyI6CbT/qlthG7c2Gr4cu\nh+ES1yVtRYLkRi8Sy3MeHpr6clnceVMmj5fdBouPdud46wSRouvbuY4FW/66\ncSuo9mLFANfDu+DOk2JSa17MSBe7XlCJQgfaOYOlXtvkiPk+XO5L1YuuZIra\njDJvqmhg4mEsW3ZdAtRgtsIgAoWB2ShdOSoTzmn3xF4PUzcLHqG/fTVzDVcO\nnr4MwCOwwTVczVqz1CLlbuHr9/BxONTp1CzLm9I8yXDsbjR9/lGVLvoTvNCz\n/sYU8Pta546USppyjwARl4AYq4D00XE+pM1zjXWpnfUXlktgwoeCVsALt5nh\nqThVqGEZLska8oGV1xdAiQrknh+bneFqNglskPEaZypkJ3hu89I3m6tr2VbE\n0ElH9QOv7lgzNArnizmzOvnCyMdE1k8VgCefIXD3qw/VCrAy+h3eKJyo+arA\nkEeZqxHo3vjIcnUxsCgY6TNFjt44n+Yjsl4uiUmYlMMv8CAN5wzLYtBN44bO\nO95t\r\n=OfOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQQDY52HPHEd4z7J9vW4FxdOGXlsxVvPFJoLZ8Tr1IiAiAaOt6W9MJh36qyXoKm4EoTiIoe1uIGFrPX78mmxbvAoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.71cc24fb.0_1605654983252_0.01304017226356069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.761027ff.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WJc+z9td9NXce5UKX6Ar3emhx/b/pfsDNYfKuXE9xja1iZb1pwKeCoMZEGoIGxgG0AGU+sW3blOVZ+jvJFCwmA==","shasum":"24eef861a4c1063543139e63d130b59fd73700fe","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyVCRA9TVsSAnZWagAA6JAP/jAD4i32UG/Rw8XZUsxI\nVinsshrtLpnpyR1ohY38uKJpB/lQmoiEhhckpES57ATlJazbH5URGKcvIOJG\nEuKyAGsluMlrZ9MwSHCQeUt88nw4ebv5ZV9aslC4AZneUe/sX67d5twyWI/l\nka2KXHAkCeC5SZDUlKcf4XfpLdX3gofjEEcM439cyJnxzzjvpftKvdyqvT2l\noyQckgRfz4c7Ny3j3daZy91VlRenZAdXx3pQoAtuOXn8ZSs1aSgc6djfAYux\nlp4DW5K3YwoWoDKmvogk6AboSb9S9aM4NF1Kk9NT5GB975sC8VhqE40ZbBhK\nMIbRs85+Rzs6oJoqGDQH8RYefU6hpRf5Vh7k+EiGM3BXjtMTpVH8ukkRuGAL\nCYg6xjx+5Kavnpsf7ZP4delr9rXmAO0nXdGZAwS+HR6r0FzkQKd2I2DG07zw\nrmB93LvBUd4xcpIvZ/sPcDQyV8onOmlqSCoGAGd5F7F40FbeZYskY7fsoTOi\nBWQJY3mLgttwVdzbO7NcRPy+JfIaaiILAnTwBtc6fJFTThDf1tzxDvbDtDV+\nFDoKpr21mDLXKWrWap+xPZAfgjgh+DiIK8vfPFWKqQNILf38WtVLTwOTvh1g\nKmiOTvH/d3JbicxN4o1QMTcLNxS0K/zYBoJ4GTlj/LzwBdapIPO+RqgNS3gR\nnur7\r\n=IckM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+eINJyON4epI1bFguo+K/z0oCvDNy/79qlo2qz7srrQIgEiHLJ6EMmZve4dX4wIM3V7Fba5Ky/EtLXSADxF5TMqc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.761027ff.0_1605737620938_0.5449347015600936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.dc93d04c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XfO0dQaSyXIm174IMA0j6JhbyIKtN5ddvnwQaLGEjSzTYXofbyOaGjIWoxIltONg6FinN9VeDuXAptwA65Y/3w==","shasum":"69513455b56cd86c3354d384071d81d8b5babf27","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ34CRA9TVsSAnZWagAAiVQP/15FQzPiHNZ8NtXe0un7\niVBMKJv7b4BKmrPV8kna3U10nnAQUyO8iN3EgUOn2eiRLl05PD5qAUIzG8Zo\nBHVaOdnyR4eTxVTLGq8/TM3YiGaPtWN4jU+He8Ky3cNWYyu55aSCoRSEe+fm\nVHr5xuBBp7WRHXxCQ6KSRNWE3x5trYR33r7or+Y9HFsVbhFfVCWbMEg03dqf\nt2zlrAdV4OgK6YJrs3B1YQ20fM4/qed10r3Fh2yrN4Rp9U9IkqK0iqa33ncj\nywc3Io130y8umAUCuTc0kzwAO1QD36liX5hbJV6lyY+WGj258Ui/1umoLYZa\nbZcS9eB8wigPfUxgKqleF5Hch3A9h2w/hKvd+VX+2gHU+mPyN7bQqvjGYDV6\nxO/mwkXBhiTf3VvkwAL/kZxFUzBzm27cNPmm3WQQikzuYEELtokiVRs/cgul\n9HKE39n1YOiB6zsg4cXNCp6rJ627Opd7VH/0cgr/vEccIRBotoVup2Jf7Mgq\nWAbRdhKzAQ0tVi1IjVFaKotW2avSbzA0cYoapA0In0yZbaR3XWzUj1K9IhsV\nS413/prLvNlZAASYDzWKiK9aiur+uilmSn7+1MOillFS7DYwN6bsKnlqxefn\nyIpw6JySxxzss5nesSTm3zA+dnO6BgvuvHj58DTiJpsr25kIK8t3dyv1jVUS\nAJIU\r\n=xYNv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaqK8ay7u7qqeZJiGsrP+G5zP1Lb4YmP8o7CQ+CWGpTAiEA2rOXHYWZpWvNnnmNvpWPq6wlDpCXSOI8APmtePw3E2Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.dc93d04c.0_1605737976400_0.9147268142935945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-udZPqgBuCY6il8CCLv9HRzzvLC2SDfTCI3If9ltQKy9VZQIJgstNyxYYrhb4nXKs9K9sRDxlvQlcGsXcDKjsHg==","shasum":"f1e282af858f18614a9a27421da39af37c7a64d8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldLCRA9TVsSAnZWagAAKnIP/3hxj9aH1WPk5yYU+0Yi\ns9LkXlyYOre/i2JHN3hpIGKne9Jo1GStm9wAB150pTq4tUQYGSxoGlUU2ZMl\noRpKBH3B+v7PFPJDLGiOC2Sq49ZT1/IiyxXfNbig5qZjpbNmRp/EDz7H4oUS\nM+WyMS+Lz9JKUG+zUH96AM/ki/2Qv0IbvBQFYIsspyB3JTLM6apOG12KsbHW\nZGVxoedxw7NoybpjoU04Oe0dTsCqaXUxL40v4yj0w7CPuRx/asfQQf5ZTfNm\nk75FX/xR07e3/52XbqpZ/PYI9rPd77hl/XgI2t0YNi0KlvBK0u9vYuiepWcC\nZuu0gDtwRPbnuAF1WZWNY7JlVcLhBUFGRCPFFaadBagGh2y9GBWQ7RxfyPXY\nwWSkLuBMhM3fCAzyu8kc9p/eeuBtu3BINVRmFgoxPa3mm4T8KP/kAErCDp9Q\np8OE1QzcJU0xA6qhM7hwtXoSbRQn4yo1RY2FLeEphBJQD2roLDDiScjTJpFv\nlHVUJIhQoyMue6LSP0v9EFWaVyoXU/XqjJ6pvT1bt7Gr6St0oEIr+5UZyUOo\n2gtJgdmfGPIdrGBK6WiudoByxSgPiBFmaRI2n8VmPC4Xo3HkKOj5UdoIlQbZ\nJ0VmxNbd//G1AwoZit/ZJ8dWV8W8JdDVnVjFnuwCbHsDnRWf4EOkSeeYvB7u\nHaRH\r\n=L6fy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5Dhn1eijCJiuYbD/V+7qgFUT2qkgtsK5XD0j+4Ont1AiBVKb3dK5k/M901aRycEd1XqzlXHw8sTtvDrZd1xaiCpw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.4a5d4eeb.0_1605785418818_0.9300171322107507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.bd176a15.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XWZ3kuih6U7uZK6LPLpLBTOUycuP4S+LZs94U4U0E9NGuA0OLAQr8caNa9OJL93bqzyxFpop71anbBRLGBPTZA==","shasum":"a48d7834e532ffae9e52fcdcc581fabc6ae7332b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMBCRA9TVsSAnZWagAAickQAICq7tUHvfok2w8DreU0\n5Q1kWjetNCbn2oTAeDGvWzNGCDazq+PTOi8SqQP1g9zOzq1CT3+1pPXARzVp\nShWTYePt/hDP3Y9rVqF3eoJ9MNCldNixBq9WJ2f2ZhE7/6xnflcMJxI7mgWP\nfNaanNw2SFo4hXiWzuR8ZIoW/7cBMEXxWtyoPrzuaBW/OnK4PIgDH4WQd+nQ\n9zxsgVSe6c6Ur1YZegIkzLD65fR5P0wzoYilotrkT6lylhQyjTgC8ZudGgE2\n4ZkdRZj4hfqskOMRRKWWrsG3aD+hlDCIFsVs3Csw3VsvOrz6RrngIsdRoFZv\nfgcOjW2+97Q5nQkfD7tPdfX0EP4aSDtT9zH9wE5Qlnx5dbXuU+CeiCFWU4oU\nYBUpsALze1dWIqvYBE2JNyFrkqdl2jemd4J2sD5Bz4Lyim8f+jpQznX0eo22\nSKr461JT79aocMsPOvubYYMsCRI5TTD2AZuruIjvq32kF2Lw6PykgtU9rejS\nvR4c1hpPyEu38OvfWAcsqWxbB6r0jn3gg8yKVbKFeMb8pFqOSiG/5XGPK0Vu\ngcv+vzKysQ3/DbIrH15uF7m98KcSPrd85KuMwkenpArtenpSO6sWgg9TF2Dv\nLBoPKIs20G2qkvbHJm0iqno94yoEGAMGl9TSMZgn8puXO/VLgEwLbAf5i5L6\nnHz2\r\n=vNb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4b3o5e2GyN84wyfUiBxE8e77SdPUpSw5oum1IB+qmCQIgFU5DbYfsKoGyX+RmUKekCnT998SKt0+pmXDv1+QkLfI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.bd176a15.0_1605812992854_0.6173041824709031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.e85aa60d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DWCOBxlBFC65RBCU+BtoK0kXVpliO1ox3Te3kSKYL52i6bRY+kglea/oUfF7YCSzfuPiT3MSwK+pMHOKybKpdw==","shasum":"d9a59594be8d9984b2b57d47514ffdb10d0a51d3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaUCRA9TVsSAnZWagAAC7sP/i1Zq/JyDCrbczBBE5Td\nC9uF9UkJqW9vAzjVZG44mDE+0QNAjSF2NDegd7jbtuOoFRhbdiI8HIT+UpY0\n5aZpUjzYifVhbUFoCajUurrQxG92ez95/BEXp9D46UEppcgOFj05EMz2GHGS\ntjaJ7xpjdV729kL24HOiT3h+lmseDpnlitxam9jVfX/rDvgOD2zmndgnq3xK\n4iAve+boXjhoWqsX9AeVE99im4OuwWBVoVb8Pcx3l9jl9bjnZcwzAbU+DTpF\ne+UnbgghajVU4/fcaFFGyg0+OM6IleIUkr1tA2vT5JhBkIs7HCdxjhXYjr2S\nN9Fw8Qcorjb/4IcU6cM7sct3M+plJkBzXrMzlYuCHpR3HPsV4r24twmCsyzC\nXWixfjOZZuRIk4z38KGh4mNvvqjy9zXZ5NssUs39GMQADJzdFGyzMevDIXOL\nNgugSeUHqsRwQuZ2P2+ZSvNUOb2taNkMYes3PJB3t/h75L1yx93UezLnQ3s8\nm4ljF9SVK1rjYg2hZaW5knGVqr5qyckWZ+kboAvFB+fRevbUUgJ2c3IO+YQP\nT93ASGKLrLScXIeXUt2BEZGnJ3wFDzlbB3vThL7QsMXFyZmGLXPzAAZL896M\nnI6ijbED28uXr7NLUAh4mMFN7MuXlYXlhSqn3lEzzWz8LyUL8Ls42iwlq/ba\nLrnX\r\n=l8OK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3SQTzdv3q3PYaeDn2FKatNlJA8F8U0F7YeUDaPeGpKAiAoUE8NpXS2uXJ1WFuenmAHVAVqCOSOkaypBvaR1BfHFA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.e85aa60d.0_1606170259749_0.4016426681813421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.72092360.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dLpUD977tlwDVvhU4UJWa6H5UVE1gcdQj8iAigff6/xP99u3lYhiLZA0TbzJalXT4J9L9nJ+BJJYcZcuEk8iMg==","shasum":"091b15d44087c35beb7e6daf9e6501a991e31b87","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIlxCRA9TVsSAnZWagAAzGYQAJ5ZSAJyRDUVosyLegJi\nAgliSSaoiWRWFhQVC6CV7UnY453MEyoLQ4f/JpYLRN7KtP12owAZcDqU6fL3\nT5chEQBX5LdHevP0BmiFtvyjEHxbGzCv5dW2iu5KowOACWgP0f6+IWfXBF1M\nb/LTjRdgEEhUuAfMrmxoXLWBZECEArIY+pCYKbypBF3GhNnGoSt0W3PnARyP\nc6Ua2bRXmtccHmBj6836nQS0r5g2huwQq+pMDEXydsmqh6iT7aYPFAjhRI2w\niWjXKQ8DRRGu8OYMR1LZ4VML5yOCErLkWKnjEhY88d0It2ORYWI/l51w6n0K\nyjY8FbM0kTfszlirsYVjfpgcAQJQDFi8dmVSKkOTjNoa09dNyq+y96e4PS/V\ngQ2l1TlcJDP9q84MqQMRLKaNNpWq9y5Z+CAEdZofa6ZZSs2SUVVXxk+varpX\nd6G0m4IRSOntaeQB5rzAY4e31lR4PnMNXYkK6ojQH/aEu66NJP1XEzNBZWs8\n6QAeMGtOfv6jYeH3nxX/tUZFVG+9A5xvrXgcJvBNULLO1pd4EOTH98Qv0PBq\nkYWX2QK5+Tbf7kca3AtQ5VQX2NJedaofIb4HtB7hJKsmLqNn6ln978qVvlzf\n4m8CMTaGf5UmY5A8LHvDad43B+yXov5Nh20KKavU6EMjRy/KjLR5DVUPK395\n1I53\r\n=r2tz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcobcOfqm/OZRm6Z+V/NcbEAWWIMUuuNmtOM/wWZYTXAiEAqYMIhSb8B6lZHnTe2FHNnSG1AcQSk5rWqOLeruEG/C4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.72092360.0_1606191472716_0.6930452600959496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.baf9d39f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4XAd8K1rATtgwCjLVGzVwToTIOu3gHxSdFboFw33/9BCOY8Keoq7t7lVhw/0wPvIcvBK5QekWQT7b/w1TDJZkQ==","shasum":"0842f002903f4d7c83d1b73f56cb9f188c5461fa","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEUCRA9TVsSAnZWagAAMxcP/3Y0jwvcM19NPWNFqgkA\ng9Whxj+c8QLbrqqtjdPiEaQ/4m4fwlA9v1F0yEEnIHbdxiBKU13sAMnSc11M\nOgb1/THXiDUXGml2ua4QH0TEOojCj90Htf6E2YxHW2hVLy3ghDL0QlO6OpCv\nzcA5R0zFGrK2/761UHxw7avsipravcPxt0iUnQdV7iSyaJwxomMEpAmoiJ53\nQpX3yCGQf7ToqZ6bswQW4Ey0jOC2Gu0mlMxTUVEvxdOEseCBPVhTj325Qt/W\n90bUFhijRAV9sXrmDMBpYQaBGTB5PD4wVFiXtSkjiwOKKvWHJIqGNid9Ta6P\nSL59gP48VyEKqrTYcnaFSXgpXFD4+TU1Mhl7423tulwFjj9KLuO8+UKHcJqk\ntgmLpSBk6kN0HmbI/P0ss4N5eaww4Id3wMYEHxDuTx+QVlcazYVNLgmsJPAz\nOWUpcy25ZBXwQKHibUU7IQ0tC9gz2DoD8dumxI97gEScxkMk4FwV/O+Zicm/\nb+FboRRQuQF8MA6sfMVeFLR95soL5d6Ntx69ilzovYUe9GBi2S7y4TuUtymz\nEzQzrXHbcgOB8udKivAVcuQoqKIUVFHGCZvxZiQpgxWrJS/6imDcxsfcJkbo\nguUDZSftNyETambpByeQ/mqFxCK3kYl6CNMjPbaMPfeSkETYPkmhK+BdN0Pk\nCSKw\r\n=Ydtt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6Gccoy7y/23B07rWv8SnDW7A54+vIQi1kgAuH2wF07AiBP6mk9WepuApiNFdVslmRtz6p+w/BlAVQouql82bH8qw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.baf9d39f.0_1606340884433_0.9600930337318376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.51aab0ad.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GSj8eSykQqfWmE2E3VOjjIdzGDH0iehFITbrGOZrFlBfTvOWYKYMiXAs4Zj2LMr9GntbJ7MfR9hdOTNmq1+dWA==","shasum":"bb40bbe65a19659478d0555d21c1cd5554ae49e6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZa4CRA9TVsSAnZWagAADGAP/RC3lYXg3aATez65SokW\n45FmD1coWvK1yzxSLp6Mv4AI43P2WmbwwDDGSdpQ00pwcM1CYtwAtRG2c28j\nPhI/5Qkn5TTWFmE/VNOos5tHyPGuebpzgIwMESIi5P3e2xx37Q1QAxrKLpFM\nA69Kt6ASUK2NthNui8aUZ1+CsUBv+AZ7LUUET0jImX6r47qhHTVpAmo3dUB0\n0YN8coBInubm6jDRGGSqd/kyuTGU2WioV9o+fJEEaREePiyT5vYfTEHOxI4c\nY75wI+ektLLvqZ3iIIyv0ohmK/JPaNpSdJ9dyzCrU1DN/DCsXYwYZFSy2ael\nhHPPKUcaHgIY7UXQ2sxsaVyOrh7POL7GFr1US6b4ZKEsrIP/fCHXu5NQETj8\nPVnZmtwnp9YwMflu07zifiWbp8r3+6NcGfv7JcmQ8ldbEiQmpZXE6zN1eyEG\nfslkI001b5R5an2UQKttDBjLhkzUWMtNchST9rNYqqKDKaQzw86lIBpg2ICc\n4fhH4P+UHhqau0G3ZjPA0uu/xJuzveA5Sy/72LAZkC3ehW6meLa0lRY6B5IA\nV+eZhSa+HFZJ8qWWlHGfdj6DIikktvwPip3Mviamr8sUqzOo+AcdtF+E8eqD\njAcF1FNgFy+EJ9l3+1bAf0Vk+YVfwpz0JdQwTkJCfz0Ek+CPSiVfvM+52PQh\nJQyI\r\n=tcYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRDvkEOmY1+Zq3F2YkVp9KNPRbmng2dURidIB31n4NFAiEAyVkVR88Sxnoo8+Agm1uUHdDS+Nr+gj6q/8Ob1y2q60g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.51aab0ad.0_1606784695941_0.4363651701125917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OChh4/mcp/MAsUsdsGRO4FojXUjE+HcqNpsLo33GX1NhWGFqGUve1Lq8AtjseL1w76wnYqFQqawOHXtMkW3HXw==","shasum":"bc25b3507dbf59e2d8a40f2bb6afed231b7c7b7d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDMCRA9TVsSAnZWagAApV8P/0+X0r3Cf0Hzs8newLFz\nThU1s9yhjPyjobXQQNJdvhQVwZ3iLiiGwmQJyXmQxyDFy9Xb/jEzGXx67HrB\n1GWBLGPbC+PDRD919BxXBNkKGzaZudVMpqOztHKfNDYyTX7SQGvxJFHfrWSG\nTHkxYb5f0JhEEMzCrqctO47VLkNF/BX7+xG84+YTjTJWjre5cF0wIMuQmKlc\nhVA3Vc/X322rdmZcnbrWUIlZSIhlMaG50nnMalVFBE36wt0JTIuLxUTlZ4gb\nsEUl64yKStgFmO3Fe6gfVKfWL+iaKVfoCsOHIPSPNNj64e3DA4OzRDCXlvD0\nVLvWoCtRq+fjFC5iNx9wvOXqNzkrrFNVc9HKC1clgM1iyOWAPXsg3qoAzJji\nBoK/nWLw+FJbw3FEL6n0ldub+vMAQD3+uGehoFrvg4zqK1Z/I/BBMIr5QP5V\naLcQR/jqBdScFT6EX9xIiv+An/wB0QT/OgukBoN5dicW5SIIuQBCmsOZ9tqu\negG4858My5XsWDLzsjMlzJrHG1N8xxCbcRNhoYQP/lg5YRxsAVSb8uhjQx4J\nilEzmjVUhbON6nHtfckEhl8Li9vNDXqjeP23hH8oeFxR8xLwTFh2Y2iO8RDP\nezfqKdsvwogzqzUdLboXT9mPcRksLVQspydVrJios0YjOXI/f9kUuGWshdc2\nZWWk\r\n=DZal\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbj4bw8ztzotuuZUPLWCtCT2W8vYViH1Jg7AMvknGPzAiEA5tk093t70V98kqcxGSY4BzbGfoDWbmv5eD0/Fu7dVVY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.8fd4af5b.0_1606955212453_0.07519341329198714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.26d14d2f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GFVNzjxH3ix+MoZuOjcKQcXng1ebgBa0ccTzNO7Llk2FvehDpEC0QyJbem9wK8WnK/ltVAnBZFK/xh6+o/dhMQ==","shasum":"fb834a8688d0ee3edb03360a3eda920145b8e23e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDeBCRA9TVsSAnZWagAAz8YQAJvOTL+xqqBR75Ln58Ii\nj5M0fAF2E0qsm74b/IVoxp1EBtWWWzzr7OOq9R2X0jwts/f3KwzXp5D+gTTL\ng7NJjeBmIzW1KoDn/Yi3x8KpbVj7qqt9nsvCVYrPhRCwBJK8zY6mJZtWTuPw\nLoj4FUNE4eYJ1Sap/mDUITG/+gy3zCw4tkXmcdwmmqG1fo7Bp6O//RKmSJwc\nx6tOfbP9klG/warLL+LoFLwFry/FtWxtyhWCT7fTcEQW7bt2A8laaQwYjztO\nMhghuYWfGG0Uc35iW0Ikt61P7QdH7dTAwCwyp5R+fQGFZJxopEyvj7wap7Nd\nJetUk0UzBPOjma9Po/Z/sV2VRjJgGCOZ9MSSp2feOlTkRNQ4MqntdAbGeeiB\nVDs687B3Ii4yejcIVD9VLFd8EpnVoEynT1QI7wxUFRUrEbrOMhDx3XO3K5DC\np3PtB41rOSXOo+C+W3OV1KrowZXOaGmzBx6/KEWedD38OUh2rbNwS9zjhktt\nOQYU0+iyeEsjvbFCmns188SPMUxLYuOlb70FBy6pjl7AxCYS5BsMUH6vZRy/\n32IJi8yZoYnBe1Nu5Qvz7Nen9ydewnPUevz2I5t6ZntXwfURIJZigtz/mNRm\nNjAelOhp5YQA3MHoPPNhzHKunfd1xA4l2QGGeSuExfaqnR0vdas67hcn7N3A\nbxtQ\r\n=zMCt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbRofiHE1PQqWt+i1WDHkUwLQphQt71nKN1xnXZfP9YAiA266wxZwiKJJxG0l685vW7hBolDMGSlDXhbdT6ss3gJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.26d14d2f.0_1606956929426_0.21823238067201567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.1663d7e4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-596F46NLk0BWou3TvGzvKu36+zbUVcDsHvIpzBUu/tdi9YxIO7iqRWkRB484jj6FnB2W9CuY3ygpDHMXx6EZWA==","shasum":"1a5bd67e5c931317e02f59484703146ba8a5cf20","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxVCRA9TVsSAnZWagAAy60P/08p+z0jhZ+WRlWxCefj\nPv4vKBp73+UOUG8xgQM/NLmI/+zJwwVlal8Nq/hdYi7jcBtXBwwKQk6l9q7s\nkH08qKQ7qSHxKOOqougaOpsM3Q/vqJ1LZM8UWSYsl2V1RMwKoihDemvRjNH0\nnq3jTsrfQhiXjG8wpVRW8NFwyeqzJD768xAXswXPyolbMT2LxRAAdrsdjIIU\nCDuH7DyRM3cG9Z74KKI2PxXi8pCtqynzXbLDhhyXAzENHgZRXJu0am1B7vvb\nzPHm9XFTx2FXZYDKLg9QaWe2XNApxEZnBnSiziIsQ7LLEz8tWcalajJX3E2N\nYKt6KZomr2DMWYLt0YFz0ylohho66GPb+ejHxKBNpssf2gp60+jvUrmqNvJ8\nrHiWVRf1WMfJNzhJ9vpLpJY08yGel3TB93KKDirZKeOPKiPh+MLNaSDgsHxF\n/mWcBkeY5sdqMjiGPKc8ouiYz8J4JWQqMdOaA7MwDdOozkJagJ1/ZX3/L0AW\nsRBj5ulxW80UiDAYtiNFA/eGlY32ofRbqFZgFTOhxGZF4KDcxyUA/BVYFAZd\nACfpF9UD60GY5tRHJGoJXJpl2vgYYAnWhUKtQqrybV1pxn9kfU1teCE2u/5J\n9/YaBecGkZMtzdIBROlGnHFgLpj4gwcjqBCRvHJ9Zk+7MBsyAUt/gZzvhYdH\nUVDt\r\n=mOY6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8iNQty6KwsLdXPfWLf2R4ZQUd75nBEvTn4SY9jLBs6wIgA1Os704BfwBnXhAauulS+NI/e/givm34g7buLqzSwi0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.1663d7e4.0_1606958164809_0.4979648330937301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-h+GejdxvpcxmEx3s7PF/PBrGRL04lwTrBLD/DTeFLTMOCYQmtqiU11S6nGigZwFgK77Sd3f6I2o3Oj6fXa56dg==","shasum":"e08d3f1d5aef645aea921092192944b565991f95","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdLCRA9TVsSAnZWagAABzwP/2238+jVixaCtqYFT6Xg\nwHLm5Lvl7ZvbsUEbsaIrJcFxzL0+TLMBsHW9Yz5Yh6O7ETTEEwOYTV7QKDtC\nMoTCGUcJWn5lthjmtGIspr5TvtQFnfVbzC9HEflAuPSysbrbDamd9WvIlgrI\nYbsPryPJdaUiR+Ywe2KL7KqAMPmZJuQL6cDhY5aUCrzggqkE3tuX48arLT4k\nE7K9tZoqHJOgXb18o3T1ZfwpdV7NZ1nZ5P96vXZhJhNCxbSgqBDCWcnlamxH\naufExgav3fhSJcrG8wCr+2f7JJ1hulma1SmDt9hMdHNoJx5ccngsJ2/AW7gj\nofoc3St7UMTh0alrckqXo4tCRFGfJBPb+j5RvHrohIL5O5fw3DEP6OKAC4/U\nIo5nbO1qY0yeg/y/IKjLkBPsj0cl4MDSSgI+JHi7QxfHbYhnrqaMz50v+e/t\nyCH+nZxIU1x88uWjG2wQycmge5R34rdN83zN4YJPOJNFvc8jAX/4hL9mdVAW\ncA3WNmir2uNV+HQX51dle1ApxqRnD/gY2tpFxSqF9fil+8ZJWug2pQfp1+O0\nH7mhd/wQfnA5+yyugDcEPDOIRHXzDRdcqdl7fKLVf7hFXSNYVM4am/YlFQkP\nyIj6k7MnIxjBnc/lb2QYEuhYso6XypHNP5vnBMhLMna/hFGj/x+MBIXhAev+\nvHBo\r\n=8PR8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVNzltSHI6E19RXllR42QVmrlZpW4NqSzISyQ50jwm3wIgdWmCZQn+a2oG1NnbpLL4plbkizIG8ul1AsGR02W0x1A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.cbe9fc12.0_1607022411109_0.6728264110365472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.9755be10.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9gEUcnq/efcZamFIsT0oIBmObiByNVSLYCU0OOwXvjLUu0BieoiyH7daDban5zMufu29kkdGnNbDo09/Q/SKFQ==","shasum":"2868748b8d304e9d14c1a3226e936015acb4e5cb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuLCRA9TVsSAnZWagAAJdkP/jEW0xnPfSL/OoZmGrxS\nmCokLcU+DbMfMnLpdQwdHe0t4S+HEHVRIXciOP3HVW/NC0vCm/n9QxwE38se\nbD4K46E6YCtR/RnBPC8oyy5jjbayV4JfMV75RRCzH8GasM9htaexVQRZNDkU\nnAgedUxgnh71FWWnqkWrkmL6ryLuE+MflKQ3gOFv0p5+aK0ykOUJb9T1sk0H\nouQwZEtu8BkHiK0k7Lcj5bQ0bwpmGFKZY8kw2yGEnePgXRAG9eqqaMlKeZsW\nPA6BQdt2grxQ+kyMnsdXcTUoQpc5JCKsO2MzuZy/aRI/TaAHVbYsnSYwSrnn\n7FGVONz/lR23vFmuN4UaCSpWFcFLZijS9K9mBIKA1sI27luLW6KSRT7NGW/4\n+d0L67t8faiuZS7IMJFN2VI2FWiYEAv/JBp37wf4yExR4FWeZ9yWfoMi9L70\naOI0NE3cv8QFgLhP4udJnmBhccMGEcIYHWxB5pK/Z4jpQy+ZiC7w5hqoPvss\n1qjtaKrXU87p6sMrzHAQWIQTtYiI+4AgwWEX4/efj3oW9ljxrH9dcOSLOF2y\nMgfj7Nn1yf1OTt6o7ANNcTfUihB44oLxoF13c/DgQA2lx7FdRDxXlnAHKVO0\n4aiyjndlp5N09u1D8uyYeJw5UeR1LzKfe/UJLq66abLC0kNTzl0OTeWwQJLU\nhGsR\r\n=QG9d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/mcf+ApDJvd4YPh7uFd1hZ4KMQU/boA4f5wZHiOjN5AiEAwshNFrVa3TKdk0eenOdaFKxkD4TuM5Qn1DG+L98xY18="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.9755be10.0_1607023499106_0.2344254715079963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-slider","version":"0.20.0-canary.3f64270c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BUGApVU9Lmde/P2DFXmzi2rvdKAkY/BVYpl/O5NkYGkR37+2GfF+7D6/K9u4hy1Ytz8p7/1LL3Rgrxq/SI+gwA==","shasum":"96fae0cdbe237166ed74bd2ec7c72cfdd5f0c5bf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1kCRA9TVsSAnZWagAA5V4QAJBDM1os+FOuoXv5NBuL\nSvcMt4oiywakwEr28bayePBokNufpgto2sqHqsg5v2cCJpyhBZ/HgTFLBSXN\nApoZeUYWFLUM/5pB/nBjYLc34tReq3NztSFvjekALEbjt5CLL7taKNuBGRPw\nA+sqdqTHu9d4D6qDK0JfdGRQY/hbPuqMz2mOPJgOxkeJCHBe+LurBUWOuN2O\nCnKKv5msWcW6rf99astTFILsnpxdYJvSN5p5gKKxVNi9ivm3kgdYFzad0TaW\nsApfZozBqVCZ/SzC4Ha0k/4SR20iZ+baSTOEW7Mpv031ql5SVSI6pEsr1zjz\nLcoCmcG/PLnUpYi86IhWManT3WdlIErK+43+T6OYJnAlJLOUcM16FO7HEqnv\nB7bwgpJNlpWiJDl0SdaQ2MyXLiF/VDm8sggIL6Gb3d9wdcb1hT1Wn72rQlgR\ntLDGM6+qG2dilZwkb/RUk480XmHPBSW9NSfGo70WlD5vm8+RCvWeW6X5e+dw\n2tAkXs2SnQUpMfXpPAUT9erRbj0Sx3QPgfzzam3nG9K1SBRVCPWvDmHtBFBg\nJkEXOtTfT7EHfxQsbwZP8eDesMkmdzL/9dTTpxWuujA3KEHK33eyMxURYTuX\njHJ8xXPKzLuzMlxgVvKkpXyyuh5ydTs4Kdxl5juX+kLVmSVTxrsRYVLKYhQZ\nf1DD\r\n=AaPM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWudN5K2e97tYaDgpKn4mRo1jO15ydDm0QyZ4k3AqBUAIhAPPRbSvV5DmG/bACnwYPCGGgaAPZnWr22jUFow5LKNzY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0-canary.3f64270c.0_1607032164017_0.49889503646908673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.d893b14a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FozrZeiztETGHKcPTyyh206C0RX9y/747xJA1mBn1WsZwO5iWxqAd6EQP3vibyqB7pm3R8CaEZLPhCkD27GWUw==","shasum":"ac2905a74709701e6c46abd8972919805e53ed81","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXfCRA9TVsSAnZWagAAd7QP/RNLHZTyVeRPy4Cw4cR8\nHvJxL5gKU4dm08eLi4O7tcvhLOzeXD73O9L8KA7BR93Dt4t6x7Aoko8xkaM5\nNTr8uS5wVk+N1gOleLawi80izO9JaPheoJoRStqA+YMwHP3EdtFUiYdUzwtv\nf2IcoRNpufGNVVIzFPA9bTAXZyyHqoGYqjp7H/TI/Z5pTrC4W/dPPBeLJ5Ty\n9oFuflzNrjl48Q87ihYpzaIS5POPxlBnapX15/kSRfewBWFqQxB53mVdaUaK\nbg8eZ/Fo+4oatEKRRx+anosEX8rgZMABPpqfNK+PN3GtfPoZ3EfDkg6DWIot\niVlI4xjqoj0jMPfvcxTMgEeZENVt+2msIgvhUXwoAoPvd63JvphCWOzHS4PV\n/cZtPbvJJ4oF8s2Iem7sDQ5NHRv1hsNup2U8mpA4TMkD4wGCstsAy0ENytF8\nbsP174I4v+WAoonmXQD8Avw8uiTVUrFuUKzEU2LlJy5H5OpHYETBuY+24zBd\nDuqQoyXG9hIFW7cHs/P/XxNghpKUuVvW8r9EgjDDyBd5FR5zItRDWlByayeb\nNtrtf6RLu8r+MG0mE5LL0sd62oevWBb/JX5DUW099I1bqc8PeYp7951jIVgY\nO4NLMqE9uQR3qsPDU6JxGBQbgv2LVC2zgHeM5UC0wV1Sg5auR0mxLfxC+VPK\n1VuC\r\n=jyWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3I6K1gTg7lGm8c/mHXZj7naGUryGhjx7amNBnfIFA8AIgQvjfunmSXyyyNHvPhLmsD/xacEIMXNMVw9Nlr3EN1Zw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.d893b14a.0_1607034335204_0.25457277491929653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-slider","version":"0.20.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-4ZI/dLtnPu7cCCaA0biiBDmwq424+F0yQVX7eLeIBW/P929KNrUwv8abqA5eTvA/qsLSi78GiwKtGj7dcEZf5g==","shasum":"8a842f5aa13cd0e416b16aecd441e2236b890f4d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.20.0.tgz","fileCount":13,"unpackedSize":66501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaYCRA9TVsSAnZWagAAS3QP/1puPn2IIPueosAwUk1A\nZaO1PpMMOZJugz47H6o1ndhDLAFYkakTTnPROfu4kYJJExG1QlAHC24tcmVb\n9hGcpwoTg7QGlkM//qdGj6YVa+8uawxZAPJeTz3dDPoXTdMCvEMCA7vYnR5L\nCDKdiwTuVwuKMksuIAVyB+0KdmllAKDe4graJnaMeurY2m+Ak7xZ3NLTdr+A\nGezTDkmrohhE0zv+FO2CUz+jOLoUbCtghaHvIA71naqxwMPZtyZ6e0H+OXy4\nq9sj5cNhLGDMN0zFwz+o321X698U6gk8npqj6XNysxR/nHbFyIjgvhAYBmGf\n1cYiN/BPcThKY15QVsXRWHtJkNbL0Md9Rv4HlyDAUMrUNx7Gh/uHqFdKau70\nszzRF9AqpugRyr7F3zRGhvKrUQize0nsF7cy1esLoc4P3cJPfr9MrV+w0/Wy\nQsf7r5FRG05T6p9PVNyKTyI8eSUksIspfUazJqghKLKBRM3BnIKtJrCh5WgN\nzPktn60LJoGjGcQBpTGwYyvpk5eJbK0dIYWdFTNwGg0mrFKs/BhceJnUAd+6\njQM04Bi912vp5ov7eIWkehN5R1jerOTcaFjsjnUw2DOZqwDexoOZgBcWDjdo\nU8OfaW8dTI8iuuyXkQn0l7lRf+X50mbEVVH1l49H4OPweiY/CMYwSmei0C2f\nnytN\r\n=wotu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQ463LyP+QzdBNZxtHksonLHnKhjXP36liDK3b+58yfAiB3eMVTDcQDVRfyKK10tU+dEpwXlVzL/mckjPhepa/nXQ=="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.20.0_1607034520278_0.2147022882479115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vSC6AnKQHp6pQxYVTGrbGwp9oTJx7L73xyKvyta4FU2IFbkyOL5//V5wy7ngysB+GDqR7fELP4W3bQTykiJzSw==","shasum":"25744dcef88845b677eebb49b13cf62de60264a2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087xCRA9TVsSAnZWagAA8DYP/ib89voYgWhVQa6rWtXh\nw53OZpU2YWcoYAvftii/IZFD6TPFmCwI9BbKpSqRsU7t2cPINNeJ4AfFqanf\nDruVFhgklh/qWbNNgY3v4lL/qd2ueU4lVT8hA0Hw0Yvik9T/0GzGvVCp24Sv\nmznfahQudC/8bvD7lRCHmgbmOKqaqTK/uN6Fk8OLubw4RS5qqE5i/vUE/odU\n2kN8NrDO3hISg2MhD8yUeHzB5EN4dzbuyhpRksVUUCwXiu/T7LeeftPRRLzu\n+sfN3xdXdg4Avng3ppCNtHsAUc9cNxp6wxyHAhNTXNL4Qztynk0oYJaKMNr1\nn/2M78IdyesDjt3jo+gg5qHtXaQCPJaJCs+LZmjBEUVBalhBY3NMBw5cnjUr\n7Uzp6MUYBfUzPfj+dxf1P0Tup8B2yC+DGhZvwMDW81tnPiiXQY7BfLfskHly\ncpT963K3vlifwom/sLovhcFa9ZfiOHIkGagENwPStu5MPyX/90Eib0PGbNf4\n2a9EqQc0VttLnz/9omXHyifr5Mrv0+84u/G3SmwOqjeOQn1zsrXWcDAxQIOw\nZ7muXk8G4qwFdrCQENa7kURKnZ2WWJZyPMmeoy7aKyiDyWj8pxruDhkabCFW\ndBMsD7zId7Nk+omjhNbZO2EqJjYLPMCk+gsy05UTD6SyZqx8jtEGHF4HqI0L\nTssU\r\n=xjW4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfUllcc9LZD809h7Poz+JpMgyAvBwiMneY928+auONBAIhAJA/H3I8h+nud0J+Cnl4YThk0ojr1hDnhEGi3tOwrnek"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.47c7d7e5.0_1607716593348_0.8994555268880366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b304a78b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rHCfE/aea3ai2rnGuVpZok7+DwA8FdOrP7e5/0CiiyUaP1QzuAZnKIp6QjWPQGdmSbf3v8ch3jpiKqQF8RP42w==","shasum":"09ef3944b7885c705462335fe866de616f84c75e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RaTCRA9TVsSAnZWagAAP4QQAIwdgEuAlWzjTeP6Wp52\n0TVtncVCFu4jQDhqfFlWcm/qQeQQfMjVO1X6x3E4RdXDBiRUefvZgslFqzI8\nnYsdFWFHM55DrAoOnc55uJM0v/ec9d4XOUSNMguymRuBDKr/WMBIrkkJhhiT\ndX3ajRvdDow916mvmXLBtGesENsq5bblIZcd673TT8fNKmxuy2w1EoclVZmT\nM4tWZPT5w4rw+SK6udVjTgzyXdxXoVFaqvhyExdmJPBstbG5SZkPWgpYBdfR\nY4pvKs7NDkuy9hw4Up97fEhAF5Su2D1OlcRGYOHz8+v6tdlKcpBiqKd0l/yC\nVdcILXgF7yKXR8K7M8kwy0BCeHHKUMzEof/S5ELHamVJDRc/+GzntNe9U/Jx\naOrT7vPWwOmF3zkjPxsab11wwQkdD/ZsZWHszQVG0uOcaOJMZ22ITYBsQjjX\nqQTGC8EbVC/Yq5aVYCobwx0KEtAZ7ZjoSVCWCSs3RFrF56H6O/0weSwJTfXa\nofr876izRnVVnlwTuBZRgAZfSC+roc3YElzu2zzQX1u8bT92ZaQO7NiSpQ+j\nG9tNNsslGBhZvA+0yaINGseZs41+r8IALXC0lLNGQNLr6WE78uD6QdJUbum3\nlAw9ICM9Q0WMWXJgLdnpDj/AK7zWxFLGvS+IUhkA4JHDEtGdBioTSaVt+Crn\ndgQb\r\n=sMd1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC36LDKpIOSDKz7su0mU6XRSaZGVvUPvU7GyGW/7aE9UAIhAJXBP7tPryHrYNlSqaMyjDzOBK77nail2/9DTDSv2Jve"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b304a78b.0_1608062610603_0.377393371066854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.777c5fa4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2hYUx32czpsyXlQY2Cj15urQ4voo+pJK23ECruSUzgPTGr3C7dSAfi76NjODYbJYjuvJvlwoPnNoNOCOiN3qgQ==","shasum":"f6cc2c29349b79618cb70235e990f2226bc8bc45","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHlCRA9TVsSAnZWagAAEzMP/RItqNbtd6guZkBEmpl4\nNdQec9JgDd04y5LphDYjHUSaGHMd2SOsHr+pv7caMAOzwRVj2vkCUwCX15hG\ntZ5nsqr7hstB6W9XY/AOn4/vgMk6PPNAN9kgjZNiZtXCkiiTroFeuHSUBl21\nfWuk8kKghTaBtF18mvmZxXDjaBZk6TlyDQeEa0DpXTsxO6niigXtpL6NYicm\n953yiKhs87i0j5C8uHU8WteJww74fgYdSnspyFzcXM9Owjo310i0QOnbDe41\ntl6ePuSJ0kq8CeofDrhO0H8/2Vbw+g5vxn9Q4LQr6GwoPZTBTMSBKaGzk1vH\n4ZcM82+PZpjqqcIdUz8CCmwZl9aEBB4YydJmsMqCJaUq6JrbMAW773zSLnXg\nfKpJAcripmKSiXvSj99mMA65yM85PenblWcqwMSPNfItaE7CQzEUCiYr2Jns\nYS53fAR+Jj9nGltemDZY78AvezZf66Dv716oTQ4+IPK7p9cPuxyeM+EtrUZv\nvQ7NQ0j1mgjX8CFKaMq27BKZduRGq18ViUZHNww53bNfhXKgkUzRurgZd+wV\ndGEIvZOpEHqeuHLoSS7XNm9iRCI1YNoWsft1kHUM5OQEe1sAN7noYr0UahfB\nqjApZVAEN2v58p/UbOdarjVqone/jPfPdO3W/WvO896aky6eib+YSYchnTyh\nJDPN\r\n=kNT8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGT8hoAFiIPIVmnoX+VlKOTAKIi4byxATkXPOkrLzJ+4AiAoj2AmMtSp95RDGOKsT729bHDRRkaWHtehGz0A9xffyQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.777c5fa4.0_1608155621011_0.11559955736608529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.635c7996.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-u9i9otEPKsPh2tn4Lnq2elzjyMhyAmwSTyzRWDqDT/c2KAMJGP/87FSn439otE+nuSZ4/7XNGdy95KmvUiQsQg==","shasum":"8b4185d952810b63521c27f2ecc2d2949ce93973","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pNCRA9TVsSAnZWagAACI0P/jw42idm4XKXyC31owcN\nDAOAKmb1Syc8PXwo14S8UvRuT978xuUndGH4q/JKEOs/39abVWpgkPuCgEN6\ntEYx7VRfW3SB017a8TYvU9EViHD0Q6sbdxb5nC7VWeAyJF017rFy7CZVO/sk\n9hUUh5+RUs1dcQ+g4RrGyShU5Bpb/vjz1uLUdxSMZ0YNVz3UeRkJrLoiI2A/\ne6UqjXvUy/Bm2O3eRJ/EO6uQYIH/f/y7nJ16w5rCeYTkvhAOWjAFbEzNBFoX\nGTLyu3n9zg89NLE36awyz8q9dfZeETBOn9PEwsEUCPeXFBhWGuGB6iH6bKnZ\nRPUOiW1ol9udKZr6yPCaDH9YhyVyMSHIvTSpBhSV5Rwt/q6GjElvKD3CRjad\nPKIjH0QfJlcM1JAP5pew2o9C/rDjGoP2a2lYLXNH8ReqC6FLbADZe51hBElp\nbZ03rejCkc7FAfF7FBIZhQp6BIWgZ/um0JkmyHIS02lNriplK6zD5a+dxD68\nke5pYWNn9CCTz3HO2ComB04yAct1TBuGy3kzto0cj/jSS2aviS7ZVRTFmNJ/\nw8hNCUsp/2a0zVmSP1X0uD7bl8GhLUeyFvo9IL1+pz6B/WDzJS5olPOFkMmI\nhjm9MrGC0yEwZfV/o/mC/UaS0spr1YXr9PGl62mjTTHk4kBknyAstDwdy24d\n4RAJ\r\n=jA7O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKhtZ42oSZI9o2F35uULcaHZoAauzWSoj3wX3wx4DNcAiBsEX8iK3lKqFgudijEIS/G6JhsRy5fTpe3PEJsgq8zCw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.635c7996.0_1608247885294_0.18678801577516224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.20b0045f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Z9CsCc9Ojev3R3HhJPFilaKHPuHfEzjo18xgLtc8mKSk48E7GQLPEdctdgo+lDDAzwiI1lQOouFLfNpnHP9Mtg==","shasum":"70cd8d952f3e5334673721b2542c95cb6af711a3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5HCRA9TVsSAnZWagAAZfsQAJIwMInW1PSGWOUtsln2\nBQepidL9HbIZb0S/bLIC1rMEORDt0imqYKpdVwiq6tKUc0x9m/N++1E6XwCX\nBeGCqRCOfFddD+yImMkv7NLwNo2t+BNJFxY6/qM+XczFAk0jXonvs2m3T7H9\nDRuMokUSww5ZRiRsA7ae+xIIb8hju1eWmAD6rbXv6JzPovfdbTehZJbyUb/u\nctids9WSXCCNgUCgdAaAu/Fef+5Y4y03lU6nJl+IrnLncHlOCMeGV7tWWOyP\n5jaeExJI15w6ohSvWRC3ly67nyiSPXczNc6U/UTD5boexq0x3KOpf36h7REI\nmV47YHpoy120v1khOJNuSHAH0iwoKLrjORC29zCo07bpvyCn82K6IBtQXFhS\nVVfhzNygbeyFMkiOEPVzPQdDJ/grDEcy/1vckym4Qkp7yV+YiEnI3uxiFhft\n8kN1C6/TfaTFS84g1GUC8ZXvw5aofStJnpoWZJ2TYWBYkHgtyA61+H2Bm0rm\nnVegkI09WphNzmgLXjijKUIJAS6+w2OmhpB0PL3rKylDbNdy6vUN1odBg54a\n7FsyLXDm/wKUJMW47t/X0GE12rh7Zqhpdf5KYIrnvNgE3vpiQMHu2OKlL6tu\nVxObAzEHxJTTaRh1RTx/2pmQQlDAIpH299qceIrOqkHTnfacUr3toq3JRPeh\njLw4\r\n=PZtg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMOHLBsxT5M5re7COODMYCS4q87JuPd7lkpTDi9QSImAiAvZcwsX3ixNglObEnLlAWd01cbWXF+41g1YSjRPXeWFQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.20b0045f.0_1608248903409_0.8575594821709713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.41f77000.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-W/VoucuemHcCVBBHJQrW90xTdJ2FdE9V489BybR2bZLNTmPGzf8Sw7qmQYb7Fx70mWpdnSQ17Cpkm9H/aoE1SA==","shasum":"11eda8608fe81a5f8ceef2184f5f641d123d072e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/kpCRA9TVsSAnZWagAAATwP/1NmY4XI1SU/3hi8S1Q5\nxjlY+cOfr/jhK4mEywL+7f8QzkzHoMwoy51ftHd4dKyvdHt6r0hVQw/qXpvy\nXQ5wOoxngmBG68I6DfOq8Kf3/Q5xz0VqQCra5BIzLsC7MUD53iiRY16PEhFg\nfEAMBmUmvXeD7+s3HITAYzV4KRFOu+lsDyB4up5o8KexhJPtSBT8E7vhjBKf\nGh/tnaJpOVAmJvjkN2e89Lj8MF3oKpL69IW8uLQ4dABRpziFV+gFk6fm8QxK\neRfC+RWQwikx8WmDZxwsFZBZz3nTMLjTedR6q+0EQD2hXP2g/0SMABceASzC\n0l0g0PqLeRr54WwV8dkDGWlnu7mhei+1AZmsWXuM5rfk8dqdJwB9Uv6Z+vgs\nHhVRJIe9b9Se4TbV3Hm9rr27ctch+vJjmf0o2TN+m3d6RxlbF7bGrDv95E9E\n7wdq4hgdrE8S9Ss1n0hiIyDAcvBaPz89oqcrjNMrw8JPhiL5qb09F94GsJED\nqbLrfoObvGtmd9kj0pIkRuhSO6kkyyivqS9N5BY2hTC8ZkkOT7dH4TxMorXq\nnvckYFaZJzOZ6IMjsMzmeCA9RV0RENHSxzl6Ymld4zW/9HRO3FHfKhs6jjKY\nXoCYtNdxfcmcFMUOzsKh6ULMJCY0Pk3tsPBwAMY+o9AlnFEjEOChuGc2xXz5\nfEei\r\n=AaYS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuZj4bZb2lGK+Gb8i1d/vVTRciVrKAmYjCqeuTkOoyWAiBVUKzwvf6M+LXmsO2S+ixKx5dnjfHOpB9AAYK5lian8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.41f77000.0_1608251689158_0.38904907309127634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.afe4079a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+88wbidB3cyCI3bMz8D/IQG71H3YC/tUMifqXMyK7aM5MXLJAqqvLF5sCayOyFo4DcuUb4f58vxKwhfWBz9ZDg==","shasum":"6a9f6ba08b1d83ff6f94cca5b2a7cef62e2c15fa","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":66536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9NCRA9TVsSAnZWagAAAiUP/1doGfoTMJJ/bJOt+fk1\nfnHVZHrU665cmwhNm6XM6BTpNhz/LUR1/UXHFdyV5p6jZDSDEPmnz868Y9Q9\nBn+Bp1EXwEO+mJoXEnY0FMA5rntpQ6gTOieVm1kGeCk9HBLtFeggzxn2eA86\nuHFe1CbPJcRNvrZmTObMIBH9LkJK1VipVATZNTNqF3LCv9aX5VxC6td6KXFo\nKqhKsqqzy04l1NU5dCYmlJk2g4CIwFilqU8o+fCWZ5xNcSLTYM33Uoj6v36a\nXgjtqUtjC9kriC9f+NwVLRp4ooJvbimLnHCv/FOrhG0nKr0UAXCHpFpeabcC\n5Sf2TikQMVuvo22GMiQ+NW+QMj6U8YWyYAeeuzEmO8qZ8bqFZ/E+f5pvglXC\nyZkzF9L44SENgIbEMg5drUckbJODHnRwiNn72AmhJwNlfYGhG5e4NtNx5TsF\nW/iZ8yVat6BodaWQDyYmOensH4VrogX3q2nv2F2J4KKlTnEM3deXiAVK/T1j\nQ9SVbyKzRcRTQSn2l7qurapCRJCzQjWne98pBJp4cKySa6mqQk5Vggg61xOf\nljq6MP35PCJMYkH721Bt13cEUiRR9k1afKics+stxlfshw/zMhNXxJezqkv4\nJjzf62XPmY5b1+VX8130bGn26PjSM+rlw4CVIu/p7wZEMPdnqGXqxew531Nr\neIrs\r\n=beH+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmMq1mRhr44i0gTVN53T+36WHv64AR8zHQk41swAJ8WgIgZtDrUnaBWi852XoXypSbuEtI9QXFWC7VqE98hQH+qWw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.afe4079a.0_1608658765174_0.5170930505859006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.407ef8f9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cuQk8J2RIuMJZrwvOaCUk3RwVWBYxi9H63/Z28V12m1WtLr030Li4x3Bvzziw7MyAnoCudxlThqe6XjtHxC4LA==","shasum":"62264125a496220b58c1695ec0519cf439e93644","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qb+CRA9TVsSAnZWagAA/owP/1lSVECMjvRNgyW2tWcz\n08sCxgKhVeO7pQNG7E4KPI4AT79jRueLjRdlhRK2yMiFKXTPv2l1fVl6yV6l\n/xiTyHxyAERfi4OPcYLJKIyPaOBBTlLox/9jZPX7PZ5u59AaP7hv0g0MIDNq\nNQn8sI74IcRRrwQ3Z5/i2NqYCrq0uLz/6HDJ1KnVfDcoGZ0HxON5Vbco6X/O\njBj6jJbZ6rX5U+clWNWfopN/jUEU4gJj3aa+5YDdDOfKg5b9S7Gr43m9qX89\nrNHWNUl0Sof1SClCvQDGaAStPJAzLV6p7UaUkpUjfH3a+P1uyr3jFdgtTH+O\nql8JzIk3oVAyVk1H7925JmiMV+SJT9nxKtNL5mxi5gcUHBOHe2nqQnJ3KsL4\nBIlIwQgzsJB8OD0u7mVb0Jy3NhL4FjFyNsNzCvuUKEHL2mcIuFzP6fL3K8io\nkpiGota2xu7pPpik0aTgzJ+KzGUa0zBhf+DXJzEIbx+vqqVRGA+8zIhCgxpd\nrhv/x1p+t4NVXr/hpj58X7EHUErxBqiRGerj2oLMrEzVpEHNbZRP3aXtImup\nP8hu7kJW+Pl8uC+zR0igsxjQxBiBhHigyujDISzwbxROIaWQ04VFiii2FWdc\n0KKGi6EIJJ2PT6oaLwotTcOSIY7RR+dDfrAy0v/xbPLigZscdSlf0gUwmgey\nDIoL\r\n=1A44\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkYSWM+t0IQH+5cGzbanRTE+dfOBT36SH6YNE5quINAgIhAIzCTohhv3kZZOwUFja4p9D3ov0hMlaHe5S9LpZDrgiO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.407ef8f9.0_1609369342346_0.9451858717837778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2e26e137.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CBR4CdeqZBJIjLT/ZrA81Kpf5QaeD9GBLiRJThXKxivtfvB1Mcdg7/ZzO1bvHpYscbblSu9ZZmkv1c/2w5bTww==","shasum":"3016fd63a5be4e657c8949c77828caf9b5c3c7b0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSqCRA9TVsSAnZWagAAy6YP/0W3hlJIq3MmO6hQ56i6\ndvb0SA4XHhasIhyw282AnFgJwHi2CSLVSBMmuy7GL/ql2j4B1upw+J+QFQJI\nbcAXrPi8rcEbvTKrsctiDi+Cu8VPz60S4zYEzbzvMmq9uHaKjGTUCRdkreq0\nY7i93/4Cuxz2Qje3ua3ECHrWkYsql65CWKA6DoSkvdLpQR7FNjfNURAR7O93\nLnhFfZr6img8cAxWbZtirEqUbOA9PBrqi1Yb7ZWhgOmSRdp7G2rXEU8FkhCT\nzNII70o2cdbpcUCLkqV3q2c8SGOjxhfkSfBNtGCA0VQWJlEFcS70HDpKlIRb\nJmOPxT4+G5wrRjdoZ24426UyI7PfGSoVEu+L9z4rDQSj8dx1RqBDY6fSDfwl\n5ObnkKb83ZEVxYnYwl7aWhKdCjbVmJm2pyTRJYXu6yzqY4xnsLKOvlkmBXs+\nCSs/BdNDWyNOrDJHTnRkcsEKtlr8WbQQOwa1H+ERBhoUx4L6yfgllaoOpWGx\nN7lMiZD+maouFpCIjftER4UhZgPbKzNaa1fwprGzU99Y0OH4+1hmjwxR4L6j\nfqD+f6mXda7iThCcVo6qJ/g952QCImf/vNFFgZJGN6PrzT8EOunXuR4quQ4z\ni7D5J0G4DSDhPCkiOBKK6F1GxlRs5H11ICozqtFyMZlXuL4dhvAIkXkcq8pS\nfTIs\r\n=SZBt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOslZwAt4ZTZK+z0p8jkstzIdasqJiJmtpU715+fWGBAiAg29RfNwlAw6jQbDYyGf16H/V4/LWLhWIpFhGQSlexiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2e26e137.0_1609872553604_0.25340716311673916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.9009f6c1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jcGKv1M/48b76Ii4OqpYRayu8JgV0F71mkryupkad8GX8KORrlbD2rOEi852UdZlXlpbeSrPyKH+7RfWxh+yNA==","shasum":"ed3d3653cc9f9d37721045277d1963a5bcc56c5c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhWCRA9TVsSAnZWagAAFNYP/i/YoaRMMfZsBaGj160V\nbDmyjEbbiL81lb544dKnTvvBX7QmyXHgqT5Rn1WzhHDvLKvGqA4yPp4GdulC\ns1ibAVROR9mSmJq4UEJ2SrUCwyK4lCBZe5kJ9EDhBjverMND61neGngpHYj0\nb7R1OQTcXC7Jc57QFAg5UjeJwcUZOGYZPDpqeh7GeVxHOHagcgkb3PTNK9y6\niBHHXkw5FdqGzx66O0iUD6j59rZ5FEMq9HSEAwz49Gb0x0bPlwDWC1KRnPZE\nRWwcnWh9rhq+fqFpF2Svv41s8MH5/Myhdq4OyjITLQULcV7bvrHbBOilafKF\nlxr/YRwM9758Knel84XbfoKp+krV+7QQZcPb+dt6njutUaDN8fkF/k5ypNub\nIELdFMVQ3ZYkRapZeBisLILQVeVDPLPQ9dVieLvtzstLvvoCiCp0QPGOA5SQ\n9AiDfsLK/EzsdoWaa9s0ltslK3igsmf03ZcmHVpaS0dFfG5eO16JPS1ys1FD\ngm8snNYNi4AYupGMR+1JtuyIINXf6rdEaKeiUROtXYKdv+m1RIwDJhnq26pU\nppgyTDlY91mm8KjaqKttlMDAsM9INb8pVuNOuGM8/IfXO4inGCgxYb93V6OK\nHq/2d66vW9oxNKgSkOA+cDZtjUv+OU5MKMWkDvkGHxiLkdqVYqXGDRz1z2l7\n5AZD\r\n=05d0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAC47Vsr43iw/z98DXcoMHuPURRG5QxpLoK2RKUyXvFCAiBuLlymTbdNYVGeEXvpmnEiUo8H9zruSorAArw7kkFjAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.9009f6c1.0_1610135637678_0.015053915974215126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.ee99b646.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8kALg3ZxA00KeLnlHIPL/pdFDLYhy/JKYNZukKYt6+N+9wZIUMHhUSdFW2bWzPqwX93mogwmt6wX4WJJVWA4Yw==","shasum":"d6190f66b2cac39d337571a05d59213ab3d23d23","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpBCRA9TVsSAnZWagAAULgP/3ayolSjr6209dUNCPjc\nqoKzvh6SP7kknrxlbH4WTXeszp9mdfHWR7iTejolaIKJHM5lUffpmKj8fQre\na6L0QhvlEt+S9LcH5lRObyl47nkztKmJKyN4Vgx76VCZ54Usi8xkeL4ct7hf\nuUB9ohQtN4O+tQ0waRXr+eul6dkK8UXE6x42akKxn0iFFAwO7vLgRhdyKOj7\nxaeNL7tjtW2YK/c97HOc8lQQ0hhXPpygfRO4ATFjN0f61NT77NPxAe42Kihn\nueIFzpP8opcRMnMdpZzNFbPfsNpxPmrAWv6tfRoPFnfNjzdQ/jcXlWGwXCjg\n/12Hn5Ob9PPgZHDPCQBXjNZQ2aOfmh/r0Eml3p3x8/JJpGwYToHKc09yhsxm\n/37zRwuLbfRRhDtofee2tPmBG2eA787uh/7BgxP2dpv9V/A/FP2uyYWYWVg5\nBssX8bYw6AAXhB/ATZrQws4WnNP2DQbrwSEiP84K3xwoeP6TBZAZxj+nKilk\nSh30E+BXBMCFQMaoNCVB835ejhVYPu0GbDBPdkaPlKHfBJtolScbaNmje07p\nnzqcUuhn6lrY0l4mS7U9tM2ZOe7TvoZMFGSXTd2/YbUbJUrVEzSSU6uMKiX5\no3BMUKDYv5pBnd5euO8zvLED2ggPhUR/lK/NGyQahEwInrL+W4f4alnLS1gT\nIqmE\r\n=jWpH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEt6o6J4GRR/flRxKiBHS4th01LSCCOUysp2PUGtdZhAIhAMoJDY6Jo8pEZwx2XwA70oGATnDYJGycIz3EWk25FMnG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.ee99b646.0_1610406465403_0.5372477566751361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.740ed33b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-34uGqfaf8T6a9KA3RS3aHZOtBZL40rQ+cZWBD512R6irouvT3m6RKpM6rnf+Yu+Q+Sj8rpIAkSMhEcTY5WZHsw==","shasum":"133cccc7445dbe1b32ff77856d68cd5410b75ed2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSBCRA9TVsSAnZWagAAyaEP/0a1HcOmj6l2e1mIDJ/U\n0AOv2ACJRJNLoLht2TaR1Zot6aNMpIZFNMeFjc83kEdLXHb8WLPJu92sc1ni\nrZ2Xu/EDPiHoTV8z1shFWXi6AD+KMeQWDtuXwdWx3fRBsblaBMiQPZouijAW\neKf0kMoTW2UpEq6CaG+tCUOytmPK2PzJQUpqWiyikK1q04EylRklxq+DFwL1\nTrbtjeZiXsrv0K74DTiD2dwb5tWL+QTkEDpkqsMfxLUG7PCP1wqd8LMlJSOv\nJg66nb6SALe+KtyppEDDv97spgL/YzSWRjPQku+OEVrz404oUEXWc36W/20X\nCjdOmzXWhHaZpJtvCqi1vB8rCyyt5l4FAKVPl+l0T0xLJKOc4jWEZEPh83ew\nUKeirvPp2iJDSYlrOr5zo7ysaLsY2u8pBlvjDozcHcWXvFAkYEwQsycy2b4b\nfIZPwu4GcxVChxrSCzjiXQzbjcH91Z9Gchi2N8gtM4tlkoyU/Uyj5NuRmKuC\n+2pcsDjcT81j2+iDAsiwNOawHc2I6F39goq73kIUX/jwzv0nplyNErZ7CFfP\nEkvGtFM/eoygZlaMS59BW1ussWrRJE56yEw9bUWFJuaIFmpPQHIUOUYpnsEg\ngzFyX+HezbiLric4MIJ+311kApkDwpf/1d8nzJ70Ao/epmDeAR0oJg3zx5cV\ntbnm\r\n=tubm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA4zUr4l6i9EOGy07oXm10ZWrY6mZN4Yjp65dVCxmE9QIgJmiRI9BjdiXJCQj6yXPTYOQEStCNPeBP9q/ojKd43x8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.740ed33b.0_1610474624603_0.07279508917783883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c5c541b1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tK3GbVAz9q7P4xShaWm93ZxhDMDftojdPdqSmZ26xQmWNdkid8bja2omFrLFPh+FSf84yprJhIk+46BHjHnO1Q==","shasum":"172e5c6955863e644acbcae3bfea36e07ffe9896","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e41CRA9TVsSAnZWagAAr8gQAJ7VIHq19DzNo6Meyqzq\nxH+DG65Jsf2UUIXi52VwObRIfB7Ym/6SqEvABro5AT+4TPSlbs41Xh9TXXlV\nHJbO7da5SpOGuNm1wBqhQsH6blCrIHGRv9c8FdB92ThupmMNrNHdZ6KcWrLz\nyOK7YHN7vtGoqNrL6K3mDkCpFrH7JHaM+LEtP/qMgHEmSvyHle7hym1y9Ns0\nEVclXYahon+N2GDBZt24fmKlPQU0FjVGu2xhSr0usnWgeNWRnPCjiR1+N2U/\nH21sIdYVd/pKbl4XlWhAXqdp8/LIiI6Vp0QIWeMnwVHXw5YAwwKmZxt717tr\naE76CQ/dczuPrbaUB2qwrv1B+ynHTQaoPrVxG91JL18WDtbZ2rUbbXiLsz7z\noCCaiYcHtyPlA9PUbMMLGwD1wmf/pT1JaEi8WMMx6YrB+DVDcZACh8IMiWj3\nuKnY6GWdFYP3iXT06JYGa/0d2aguOgWjwgg2YfpOIOc2Qb4EkxEV4EC3T329\nHZxtecyWluwD2kd6m/UNh7yobh8Yt8Fkl1z7nXY1y+h9bhtjDznpFVW7AKRq\nObtv6vTbubWDmYeu+Eoiud6vdSHyROTYlmJOL9+xve6nTYgiaxmrQlHlgEsq\njsma2bCngaUHY6sMlW+nApX6vnXkXNvk2uq4hPeYX0UGXkbUZWZCrDoXSD8a\n9b5r\r\n=yT+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTUiK92+AL28+k4Rg6GVrOg8DbwqgDa9wPuO6nv7Gg3AiEAhMuw7ZqrX8elE67FqM7nuE1+Tk7xrNlVl0NgyxHS5c0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c5c541b1.0_1610477108992_0.9220546515669246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.06fe9d90.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aVeH7HSpaJaz8gVk5Ovzi2YJ2S0BFYJM7V601xVdts2WnmjJTU/cU+sh9G/U9eNBJbkHMYTaWy3kU7MnlB4LRQ==","shasum":"59f89edb3baae7fab21c4bdae726b4b9e7b521e3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyRCRA9TVsSAnZWagAAWbIQAI9v5iBjPL0M/26f1z2N\n2jZ8IaNkbgsxTwfkimUtGndj6v7GHep0eP4FcpQURfhIVL5n9hhhmiP8PT6q\nzJ7nP+R+4HYlW9P6mESNpFn+ZjuQIs2zGjGdEfjiYbG316vsYVlqEW+xw5n/\n69PCbllTIjZDWJlCM0Y0h48+eSw9DLbQgtgPQkHXgFL/blFUVbPYTqYmAw0N\nIIEr85GnTEB0ruIzUS+U4DSSt57Vm2sAoQft1l242hR85utbqJ+0ziapetyD\nX8EnDSa6lLDM64DXCA0bb4HTbPYDy4uH+E7hHs4QAS0Ze5L19dv1yZohYIuB\nDBVtdzWyyYwOxxuy2vXArcEc5L087vymKiH1Dk50AZPfcO1wm2LCMsITxSYL\nIGYQz3B1sKgPsYRzf2QyJ8u5WmLal+sgroJFHvITG94p2fPVjkC69ilaCNKF\nlF4lTCwEue7tFPX1FkRRN3NuMV/Lpq5ZpYjDl1QEuCFDyKGXaqBXSdB8IAqD\nBqqdkYZ2kgo6vz9khicma1Fe8AuNTKX7iYNBwJ1oUNn2zYxmgT+qJG6Nc5+q\n35txkPFsy+LvBdo2oD/lmlR9e2QIzKBZPH6ZIt/V95mTgUPQqevtRLHgKjsm\ntFjR+iHV4DE/Jgvr2Z7gsj7XdiyuEHBAXkqlRSFLA3s4cdxWdeVxTd4EP6l+\nC4mu\r\n=PBgW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyLYfuG5iojfKPz9HJMjZ70uCJHGJQq1qQ2X1Ra63DLgIhAOk+BiZBSP4iFW7eoNJHAvON32/6qF5RlvSE+4zpex9i"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.06fe9d90.0_1610484880827_0.3717229591040552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.269eed01.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oZgsvnTRYYWV8Zl8vjf7oN3wXYV7rUwdIEeZsH6kukIcFN2eQHw1i2Q8slihbSfO/b5IH6x3dYui4MP7+lL47Q==","shasum":"6201e5e1b4dbd5c3c33323de5518aa31bb99d77f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nVCRA9TVsSAnZWagAAYHYP/3v9iIJGKds3cSJ0p+2k\nLP9+vwNVTdeCiM5hhK27pcZ+QGNMWuzu9jozYvpXxiLzs80N/QZCMtRxQ1ss\ndSV13MJ3yZULJLVtM64QZQ4lRgX5nQr0puvdSIOPa/Cbnl6lwIW7ss7Jep2O\neMVZ0ZTLOrBtw6Sw/1b208gDh4EyOaca8vIac8wHbAppHd2ExApfou+xlj1i\nZ7GNZfPsdedttE6uPZb5fiGwG65DeZqMTTJ9iNfmbHDB5jI4/vuiJTAUOse6\nCNlirxwMcL6/unBenDXSgYvjxFqeD4iIcpJTygd/uLPNwesEkstsb7Z6hCnQ\n1Q0klKB+0MTF2mCcHeEWOk7MBH3yEOnj/KACilf0nvmr7ibGTHmQQErLaYTT\nX+cg4zRA5mobYFxm0xtRNX50XO6sBl5w8WHDBpn6k2E5wXTjH5Q1A6nT5eBJ\nu/sTCSYfcScfyWWvp18SLFL7Gnxq+zcsq7xUqRbPtJSNcxtXx7JGYkbmTj0J\n1keTJdayq2TatNUdJMDRkt2JnrkSGkSY3DfoyRtmDxGm5ItckQDRao5RvF3H\n/xVDsZMN7de3GmnYJ/0huGHMHb8OVSDZUseDKYUaFqKohVWQZ3Bwgd6hoYK2\nkYUAmWuS83zpY8VRFLUm0nKHvMnyaMnU6AwuBRIlcolrd6S6XYC8Yszj7Afv\nWWhN\r\n=pi/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUEuvJFHWov84KIWc8Ksf09nn370GqtblAs0aYqZpdPAiBI13on5rL2vdJN7N2RnEh4omqhPfwm2ynjLLiUgHRIzg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.269eed01.0_1610574293339_0.11734007440627914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.8c075f35.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zmZ2qZZMobRadVBC5cWrG/g+AuC20oo/khLDHFCBMoEHGfPFdbwCn/1d3Uc5gCMYUnJVcWMmEl9ZIsfU4nOQrw==","shasum":"3ad6beee91f3c6930b6c4b5c19b4900cd4b33917","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3z4CRA9TVsSAnZWagAA4hwP/2IAJrzDu43ZsQEHBJUi\n++DwmB0sXzFuEsqtJiaVJUAc42fcVhbMx+uLEW50UhW2sQcVqG65eG03Jkvm\nCwKRljnqSSx6cZLGskJhQs5tj8jkRcp0mwSL2I2MWUHQW43CZI4O+SZEpEV/\nDL9QA+OPGZ2117vKBijqugUTV1fgyPot0pfPtFuhOJREfinpBI1K0SdDDicg\niEHc6YTsZgFRVjOJrfg8JyH3XlfwELxDkE/sgbyqjspE4XE/5d2LpinV6Whm\na6mDsw112gxmSfylpP9irJktuJ4n4YQ9NjjlFn/Vf4uC6HCVu5GeC3XNtkKK\ncxjo6etQutfrSYw7zExk+Y9cTX2aLmbZlu/Oc7yz1sWo7et6WYXW3MCLoGID\nYxjWgvYopCBs3PTGC+1/Xg6LHEDahW8GuwiQmBB3q7jEaAVQkfakCxwmr4Pg\n+qTiSp+ovdCtc0AMXzCtWMzCBY01Suj64DGFBNkCdgf7qhymfBfzoswfsZPI\n1MZeO59WOjlA8hIhdL0dMAcd0CFaVjb6ufUd9FBsqLkrduv6VTTjE7H1i1V/\nPXzdxAMK9peN5iflB+H5YdONFFxzEzTCU0UUkZwHHlVlEo30SicnKoD6CXuM\nZiFoy5crD+gJ9vGlmRMFLfUSCIq8d6dULtsizwscNsX8N0N6+iu16sAbDcSC\nuGuv\r\n=A4rV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhYy3EwOlUlzWOmB/BhI8jlJYnC0lAqPNVyM+OociaHAiEArgk+tt9Ls2zqQX1YxUTBv+jq7S345t8MB0zZCDYnj2M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.8c075f35.0_1610579191975_0.569064373083946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.3cda381b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Nmk2rEzsQq0as3dybRPXQTCrrNm17wbaCc/CjShG3KywhTuY+4e3nnjg3hhR1kj2uiSNhMxWXQ5P7BHh424uXw==","shasum":"837b0f494d9cd80779a3c2db15cd3ee0395f5e54","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4p9CRA9TVsSAnZWagAAmg0QAJ3wGAEB5o0eoVMATT0j\nRyZxeV88/q9GsLwhulI2oiQR+Nd9Yxaaimo4gJob8LQM+kq4+V4+u9N6K92x\n4pSrvvtA9RWxz5vZdpjmIE+pPyIJBeXLefxeUjze90/t5M+Ae7yDf04cknjL\nAeRVupYOzrSkf1+ZLlY39UP14PsI6bg+/1/HbDFNBBX3T55irAdMxQIeDOHM\nC8bL1YQgmElOJv5/aN+0iIKWw7z53VZQ2vtfBlrEd6IebFPtStZkLn/8xqcP\ng4nLROjtdU47c9pWQ2C+8etMwvZRyaZdBtQVsCOygpFOYf4jyRVJpUbVzQr1\nuHZvrd8n0BE6ebzF8WMZBP8MOFqDurAUyjZkWdHic1xRqPRgHCJZ4CCt39xN\n4InVc9iOp8mL/i4M1ST6oJHpxT0uNsk9wOfvdlDfmC3QLO+m6nXXyk0ZNrh5\ntrdqJWWULSp7EnDkQQA614/3tm0qdOIFMNTkeug5R/3qFwwmb46ThwRaSKio\n0LGoxQcIFmmPPLApw8AERT4KWU7/sLPyIVr4P5Dnh8oaPAThNND3atRbxxjQ\nzan6TVBDmBmDrxth/nf3Ybq4BMwRP+X8RDDXMuk4/SzZfBJDHUZhUf9jIjYu\nomy0fWdpqpdJzYAUlRejCC43TNULVXFUdsrB2BS1lbTbq7coswkdNX7GG5zh\nkWVz\r\n=qDTw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5ZShhvQoT5Bzw84Qu+GKbe3S3k5eUHp3mtw80Ae1C9QIgE4GMsiUs/FKI5Xytr/yG65vpAfhRxm+emDagWiQ1BKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.3cda381b.0_1610582653227_0.1484362713643761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.bc113605.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jd/6UXebZLLKknoEPBIi6JOUw3VQvK4h3q8dwAf9l9Mu7TvpkIH8FktB/Yqfd/d+V+xWli/qfjHty0kjmF22MA==","shasum":"3136ea2b36399f352da91a66a9a281aebf1e6227","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QNCRA9TVsSAnZWagAAzI8P/1pKUHI9r8f9ZNvU9CFg\nIVUR5p+EbBZt/M1cYjjTbBF6TcSeUg/sMQJ/f8NCxgwYk1wWQKPF+qO9kpOl\nXDUvSAf1iWjyXwecZOjHQSGObtIg/hzOQqevgMuj07bIn13OKDXc30GrCeCl\naoQ8s25rKbKHQueznj9XKgo+eVaYgZp9p1qUjolb6hh+DmYQor56AlVoACTW\nhRbDdDvQtOFThb83Bx0GWw9AP/N88Meeem0BFSzVq/XtUnjws/kgjtnzT23/\nZw8KJvT1bljnnPi5blfTU4yjGntHzxSXz9OuIHeta7HUi/bF9371rTVnkSIi\nOwjPw7+gQFfcCcKwcLaeNxx2Yw7b5j1fiRUeCd/vW7naDEWt/Te/ZrDGXhrm\nu5YPNg7+vQZFjt8NVe3giCGx3cNqdrU1ydNSCo+voIJNT+vIci1/yGzWO11j\np8YUpYXRniqu68TOEmgYub/fhwwG+NPp3LNG7hOxcO7c6WsqVK48I5JVxy5I\nmK+51StDDuMA5tTKVHuFsbxiP/ZZEAflzgWle2KW1BPq+uvT82uIaBvtyq+W\njHbig9A6V9hkWRtLspg5kxXHCKlPgcZjhb8xq9twTiQp91jQd7BQZhRNUTrZ\njehqTAB4Ga2ywDxtKsKP+gazr21a9KkMZOBjSdYWO6VlGHr1pzWjRHTVQEEw\ndnjZ\r\n=EIHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8D5AO+2n8moHFVmoiDFqudaOJsFeeLudze2jCC4EB/AIgTKKwy8XtROo7B/ElVVeEI1YTbWMvmf9h/yAxE7tf460="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.bc113605.0_1610585100545_0.9528798476230909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-NqRdOfV49Ge7pwrV4TVWrcz25Amn3BA2xllPpfjc7OQyvV31w9Rgb9ofC39tDLSFb7FE7HDbOCBmAFkaX6VeBw==","shasum":"55cd3fd56ad0f89a3a34e3b7c8826cc348c2cdac","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZWCRA9TVsSAnZWagAAIlsP/Azn6Ky+2HPHB/GfWotr\nqJ/R60F8n7q9c+PebIVw1d7U7Br0Xab267M8H9MqFmhrIKqRvxj8ebgyL61/\nMgbNreoad7/FYjLZk2z3w0Nq/wtOf5rFFL1AWo0eQ4ckirCYfBib02kz4P9m\nWsdI0WV71nEGfx2+Gfbu8BKJm66Sz4bmTshFpcQ8tGIe3TO5ClmaISsdCc2y\nJ0A30xTkxwG7m5ulo+xnD/jW40gaGvmCZ4YQNvpRypd6Hlde8X8bzioJaEcH\nFX9U5W3XQwalc05vZn6kLsqVfoeBwoaBPT8ZSySn4g1Vpok91cagQH/JX88N\n2/LBT+GavG0SkLvFfV6wKtrABIlME/VNWptCFgaCwXogOpm2t86W2W0zFU5g\nBh/323n54u4WNT27qQKGNFhFoKBcuMJi2+wSh7Nf691K5QeGCkYKNm/ME9Y4\nZEkS9SYgDavyB033VmZ4JfqclQG8bsM61TRYGPkscCtLqDYKE86d5m9JNb+w\noa4lOiJjztG/ShGPNumFi+SFrHE4KV6Ya3KFf73WPj1s7tgqHdd98rVr3Z8k\n4x+m+CCj5YNML/BCisx95CYGhSeg40OKHC/zUID/sth0bjZ5/4tjbri2aKij\ntSb18dRtQewGgTFO+6+sJcRm9K0Kq3Z+6gmQc1s8JWGi4dFdq8PTQ8TtLyIx\nk+eJ\r\n=CKwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaLBGuDYVXwUYr1cIJLXlsaiRXp7rsa8vWJht0Se/ZQAiEAi51TmcJADd1/kFe96qzNrfRhM2vwCkyxUW4tyrjoxOE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0c1d6ff9.0_1610741333610_0.4505336755953926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b4332e00.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LpSL3QZjoPPiDFaiYvDYZ/K4h81HVeBIZJG7DLPk3LYWtHmbNsklbInQ0Wz0nkm6vU+hc30SdiLGd9PJjI6Lxw==","shasum":"5456227e20a56786259faed46eacc2a51591a3df","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIOCRA9TVsSAnZWagAAyw0QAI8IY68u7WWgeb5+ffh8\nmrWVL7ZBNuAlP+o1nq8TuKjurJKYFzlWP93EXVeVW2GwNJgg2sqK6WyiEa4t\npK/2VUYuMCpLhHwhoi/blhRdqY590C3nUl0kFpvLir91ssFCOuBDvDsPt2Bl\nW35RplkbPGTDvlhg0Jnd334Num4XH9kEdTAVWj6+Nas/zyK3kvLLFYdPygGp\nCzriBWpiXIswzEJ4xusrfGC4cKQDYIaQgN9c4kmDf8mEBaPYSEOsflUvmdWF\n55hhfFXBMxkvHEnitlHzOU8OUivGb/aYu6xNEXZ2ZFKSSQW1rds2irx102bC\n9HQh4AL96LoV7AeNzVu9sJjNW2NNFvL8AhBWkheQsGO/hWOb9YWWNlsN5dSr\ndKsGLPy9qrDBTs9B+hkPCzkEXusdEJM6DJ4TJd3DzqU+7wz5zIkH7qfH913N\n5pa7BNsULZD+JiupPfuEbtWw9Rht3jzaYlvDldjlz1BCgbt3l/Lbq0u1Yier\nQ4LdfIuWOe27NsfsJ9vUPQ4n8wo1uREzPkXDN7Y43UeLUyqI/KU/G8SmGiaJ\njyc6oiFi/6MrEGzwM9lI5Vuu0eYH/43DJgCxyRteGfdUPx95IH6UtPMDBwpV\nZpQ1CK1+MElnYTnXe+ju/cJnSB3MHbN50GEGTfrs6D0Tgm6XNESdEb+lCQmr\nsnbJ\r\n=B/NB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsy4WoFhJ11mHma17YViAwppFTQURA+RVF1lxh6/mTPwIgUNxwi2/J89YJb5RtMZCAy0BdyE4dKOZ77XbaihBrOb4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b4332e00.0_1610748429598_0.08620824911532488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2899691d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-PVB6u8K4kfBVx/ePWzQhy12SK/MpKvIAMUOmaARK/9Oa0b4PDAE3SdjnLAXAJ0JgENnimWXtAlolZWKIPBNfLw==","shasum":"8a6ef954cfd772d979f30338cc4aba764220f168","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTuCRA9TVsSAnZWagAAujUP/2EzmzJG7tlOXjQHt401\nch9xnmXCtFGMu3EHtx/uAiyABCXkVxd6RXfFxKg4DFvI1WaPvkIuuchWbmbY\nixugp/aNfstILChOjTqpgLFChbczmCrucgbnQMksArMzALcpq1a9AMgf3daH\nf3zOtzpdiUgg+bnnVLwBC3XAYlroD15qzc6wRIV5yto/gUleDTkUmlLnahSz\n2oumVKC+pGyk5hV34Dv9i405jgAwVX8ekmxyqkOL2/Hq1MBi/gPjmpG+ZGx5\nIFQcp7Psko433mD+QLtsMohzQf2AHVJRKOVXKIZXpC2zmS26tQE//JBlMfqB\nb5EhOX1mIaiXxgFc4Wp5LRjChfFsznI4SIfFwh22xIIanv7ZuMUhSVUoVK2g\n/8Ni9IXQCk2I4eKeKTFKaLXU6KilT9cSZKZRFNsCQ8pVi7tlQJWd/FnUz9yz\nAbGhpYRaARQy13NJxAW42sBESCGxWGGXBjN7e5PyCC2KF8ipWj9SIjuRd97x\nUVJN7lyV0y5NykNaKSlBFdHbaXhuANFIU17VEI+VkjuWz4rZXd8QClEwCFOA\nCeYMeQxLW2bH+ri9XvAjdzneVZIU+N/mKj8ef0zfiJYf85rOUAEmFjnvOhsI\nBhnFSixOye6FpHS6suC5xuGi2UCGoB2SfOWpi6WTca8Bb2Kf1aHoaC7DXRfp\nJhFS\r\n=wz/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBf23NSJArz/w3XAJFrLiNOxDT0jtTFzslj/5tLHycgFAiEA8NCiSQhotnynrCNM0Z3t+G/dWPV/kIzpngkO4eMy7/E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2899691d.0_1610761453999_0.8664936408147157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.fe73953b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-DY1cgz6OuYeQD+cc8RS9M5JLkkQh5caMY/kLae+HalfmBH/FCK+x1njDov+IdFCuTPIqEEP9yBps2Afxx53PEQ==","shasum":"f213b72acd2ccce186c04d34aa9f225552c9a74d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEcCRA9TVsSAnZWagAAvQIP/1hMhkTny9BNYDHNHAo2\naa0Jz/MyYWOoUf/4Fp7l62MGleo5C4By6wbqy1Rqu71rS1BAG8n1ct8qZYuJ\nX0G+Mre4RF01DY2FfiemFJsTAZVHLimRpxcKvfPQBc42blmLWjnPwurqmBH0\nylFSRGwOwtIMbt7asVHiP/dhXhhWU3dCNychrGn8C/al9AozMlVh+tWkBF+t\nvCVJ6yJ/wXx/mV69mkBHMHjVSdam8u0FiGUso5davECVD2rgcNrOWDYBTNau\nuRx6HZGodvOR8Ol8e2YJKtmrUSHkYrwh5U/LqfqIXqYNDJw4VZPUbNX2CxFu\nvDW55/uC4MVU+l5FpBIOGMjRU5o9a//fZfLya18D5Qq6U1aiIEwQjKkZlTUI\nxsK4A+EaNmsl0Ud779OYopCrgI7VI85RMQwJIuW9911+0iZSLg4Bud3IYDS8\n0lusqq6BQBnbpFyHrvfLOLpJXHXl76NCSsWNSdo537Lpg0PwdUtbSDfV+4eZ\ntBjyB/SQpyJHNSxEMs/Rxpas6qppeaKWc/7F9uxHcnmnvSr+OPlINWY2Hd5I\nQDLvKckeODCPb/RWw9ab/z3xESpUX/AC/9t55lXSPiqArRZNFL/0IsK1otTy\nDZEb2zxLiUv3RiOx/PGiXQyMRnxystiyZ8dKpdbeSVSbH9wubM47MFQbGYHZ\nM+Z3\r\n=NJ0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFAnhtrSDH8IidxKwJ6MUVpZ50O8tpVZYw6eLIqQ0mmgIhAPrJBCqaYkXhXojKbJIwr1Gfd7H6jhqAl/6qsnrE1MIl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.fe73953b.0_1611084059961_0.9970731311814842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.d3a16455.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zTFKjq4b8S2f35ey1PgRlMdngruMmw6F7XghnGTFRgH9xJDYPvmA5X5Fmca84TcXr9Mtpf/D4Kcn3Jw2HNFOiA==","shasum":"b396fc5a7ff71e864dccd2707dd98642e4c3dd94","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhdCRA9TVsSAnZWagAArj8P/006Rr192uZv8sNdaIbd\nwkvRGVc4i7EHEYAnxs4tIjjRcJCP/89S43AgJGywOH2GQeF7uSco7vFXdW1t\nNXGns508QmVpZWZlWJrcvSduOQT8Qlao18g6gPsDENcpuA8HHWdfE8k4TRaY\njwzySN5T3DTSGa7o5N05h3vJ0JDTFAztHUzfZozo9v02g2HlxTSvQZJrBOgi\npvvX36j8drgJVos+ANMYQKThiekhCniTBQwPAUS2WrcfqD/gTV9YSQVV4fm8\nm4SRZk0jXOI8+XvXyjt8/AWYOCYEWJFnZVFUnEpjtE5WB6EMHxUzEhJXtDcE\neo0CLXO6F1ARUkoq/zRZ34qxgLUFTvhaezCaX040hORlcCrkh5npa+YuwTcN\n4pzcldysPth5DFcibDXWurpnbURjd/zZr0k4iAouv8L0A60sdmLSzXDNpser\nTPVgtufWC4r0RI9P+83mZSitYo/QBYTwUQICkQl+W+E4QZUpxtk9FzwSn3On\nIfRrlsu0EP5VZVpC9OZZbeXZuScsNw4dsmI8FD4G3q5OBnfYkqQFJZrGAsdZ\niI0X2Ygw6q+hQDC/pesr/oSy6k9JrZ3PWrTNzRpZX+sU9xfNrjhpcU0jXABa\njt8Jk6LnNoBPaNse2uXIEpuE3HwnOonyxDttU+TRMLJ7S8b4mbV/KIrmh+o4\nn+C5\r\n=Z82j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEk//+/ZOJNp+ZLkX34x3/LaDY7+knSQI5TRKfKji9/PAiEAhKmMb4Gsv09/y1FpZUaQxGc43s3qTf4B92lwHDd4rA4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.d3a16455.0_1611085917277_0.6700266348190136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.597ca1b6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gBpQ1J+086zTV7m6LCnxLz9LbKxFwun6Lwadf23TZbqPO2oL1f+G8P7qKeFzMJ8JE5S79Y3p9T68uuP1bjm77A==","shasum":"37723bc165c53877d5112b54702170d5a1b05936","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4B0CRA9TVsSAnZWagAAv70P/RzGls3IvQmq98Dg44/O\nW5EZhp0yoITfuIsGje1pHaIDDis0UeyzQFHPslB0bxF4QAymXoA/zhf5rw7X\nuAEujIU3AdTU3JZSOaCq6F8aA6cAA6ladpSxHnyJkRCCZPDl7Comx4xlTIog\n3LlMZM+VIomdhU6pgvipt6I5km7CgrjBQPcem52WnyPYM80ftuI2YfG2aZTy\ndOnReZyGW2P5xYG3HcB/jkjPi7uBED7z/9OX5nUMEmTWt+mJfPH8QREgNzdZ\n/bg8Pn7ZLUKSUPFSU3F1yyJL4T4s8K2/pKo63epFJilHAyPeAaX2eus7AA9I\n9ktuk9xa8UZFNQWDJwKnq5KfxLBIUoL01nNwB+x0kwKAm/8WGYIGOpY0KRKa\nz2apKRAzzmeY2kWHRv/+tw+ZtqzD4o9bTDDVUf+ed7Lyn116/w900f3qlrqT\nz3RD3X02XuWGuYSsJJRAtovyJ3EELKE71wPvapVnonptyhefZJXbM+i6hV0f\nAEn1/fjBXXk46o6Q9PheAxdh1yeWXMG/PMR3gmXvC30ZFWrxojVCZH+4vO/3\nWiK+0NqXE1tmQM0FIp2VOmDZ8klxVV2pATWSCorX967ozN3o3Uog+hwSpBEJ\nrB7q9IVNshA8IoXp0Y18ef/Un2yuKrC3D2QA96SB2wBf1EzKJzYeSWXrXfXi\ntv5f\r\n=iMXh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFRNwZWImyFONevcgtZGAxIFdYASwVg3s7o5n8gHzBIAiEAt3XAI3lUDgX8kNZ2e75GUx4yVVURX0y+BJpl7g8EpTU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.597ca1b6.0_1611104372287_0.12056717913889559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.3c195efe.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ep3nWUAYAZl33QXVNwz7PdL5nIGqrOBTnnvgLKEH98gu3KBzMjfUlUatuhWTCDzhx9OaTnt2vAclq44/P/+Okw==","shasum":"cbb138f32a9d7e6d86fa2ff1829c39e188719b00","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47jCRA9TVsSAnZWagAAcZAP/1tohTPjOWB0pFTF3wa/\nrCA85m23haPrz/6mbcnc3gszfi+wQ+aTLx0VVoeN8Iuie6tPANKH7u1bRDQw\nZH/P7r2dR/sdOoDaEtFWS5zqvg+MxKRp+4hzKPQLTHaffMoZaPW8nHJN+V8l\npkmxfxaAk7X5zkKAFpJ3FKLpukB57zVrEnzeodR0+ZInewy6KfcxFczUeRfs\ndGAz7FDT9YGZhYvGL8J1b+AXLK3ytn6EhQJYYoBN4RQGT2Dfnc0stxPbwEla\nvpp/Oo9ypGQwPWRGFOQttXlzycORZX6VAS2L5rUaOntkJ2iQ2PXF7iLTzOIp\nEpeBAHKXyyuXjEZWbDgOXukKxksBJBw26KGn/+iQZsyi6fAQevhq8k/wetfX\n3A79010SJKgIHgXoXAuzPbaY7zVEqlp2jVUWjh37gvIF9sTkW162Ue4ggcJo\nIMnETx+uZ1IQk/E2khEuDjnh2froFcMXv4IEOp9i1H0Ey7Hq9i7CL95UuRfP\nh9x/nvOJhDMovdPWNIZE8q47SGIK8mdHmSsCb6XtHZYbDP8pzboCpqVY+rUv\nVIsIjpEVlzkKPprgXyva91ssavnALDIXcwcoU20qNtgPgV1Erre/NfkUw6t4\nJSAYf4k5Yd36XK9OBFRhGTUnre1vigRcS198ZmHWwfFo2UaY7nWccaj0kQmx\nmq/i\r\n=YDxr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc7ea4fVFLVdu1b6uDr0iVzyBqCRLBHGjQ3snYZNU0bgIhALu/l3wegDcD3SxBvnyvz+OGQNRUcmADx4QwrwUf6pQM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.3c195efe.0_1611108066769_0.23505050354837964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.f7b8755f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vYel85icfWgSwIQ8FF+vddB9xIMJM4eTriv16+RQx6Az2ZD7yF+vOzv9nb0h3OPGmvZ19fS1Ba7PyHWD7nrrrw==","shasum":"75fff44960f30214ebbec2a3de6cef4f24668315","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJR/CRA9TVsSAnZWagAAM54QAI5NgdftJlu/afJ68rUt\nsq3TWrP3Qrb3PanOJqnpcpjhYcYor2qQG3hNqNBzpukMy3CbEOiR4b7DeNnL\nrxcesZxN5LpQ5xLh1+ZnJHAVNe0omRKbMyC2QA3gxiLL8AbdWNliuKe4Vg9h\n16ph6y78VpyJw4BVnikTYlbikYiEgzKRnnvz6/G3nE+14FiijjVpzpHrY/3A\nO4u8BF+lPBSTF0qxca6biX9SMllbGRwxRrOp8GUOOI4Dndty8Y8lNgkFBw/e\nUiF3wTS2gcVXdFQg1PywDbCFbUxntOCB7Mtt3ZbUylPAuK5BW+AZu6Tp8bWg\n4KwZBNg7XgUr48wGP8MxukCTjVSj09apW9PeEYiCzOXvckIp+ecFMdZjlpRV\nm+bqk3OgJxFZv4EiE1n+cz5eoCL8f3nX2l4etZZOrxv8aBncYEZdw2GoEjSL\ntkfRQp+OCTSM3s8kTEa77jtmiEW2MV6xUQLYMQ9RU7VLTxjquDOwKizm1bFM\nx1pM/ELI+2Me5Jq6AkBruLcLIkzFali51MA+CwWztl2Ph+XAATUXeVHQYh3p\nj1/NBbjWivNSyh+JK6AZpg8p0I8sEb0cokavW/+nOxFKA5eNDC6PVtH4Qvg+\n2FdKQT9w0NKfW70SumSZsuNpszmCkUHChMVXaKlj3/e86bhrmq6XC9P4BoUu\nBCWt\r\n=8BfW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMcpd6B8IyskxfZopD9Bw518RuApUmyPd9dgZpKADoyAiBahuVIAb0lIv1Uo33LWF49GJjYM4K6GMhx7rs3LlB7dA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.f7b8755f.0_1611175038896_0.4253134665338507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.f60de7df.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8kLtElPrshnWbNyc8CLxG7DqfFbUl7AjW2h3t8Z5qA0KrKozDmCQV4HcsV4+8m0Sagc/aWd7npFTfV1J+Mgb6w==","shasum":"3e127932a566347ae8c1d985eebe9dd6c86da635","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL50CRA9TVsSAnZWagAATRcP/2oVyAAKulzr+NcbN8tS\nzq/z6BEnPcM0Jx8R6fqCyRZDuVUzpVMGlb9BSUT/Gp+Rm5zFhuvWLIOVe2jt\nd/e64XLrkDZovD+S8cgkZVF1aX8XimcZNroSgfT5ZJbVy43L5xshta1cV53V\n2asrj5VZAtSCWxdUcI7H1wl6TIdHc32Z8+E0OIHXlUdTKBjIwsUnGejChGaP\n12+aZ/gOJA726ZLYp2vxCUp2mDObnG+3L01GmyY3QoT7CqpRlh6ZIDQDrb42\nl85EuLW4pEqtn5Y9oop506ZvyKKzpbcQc/FuZGuAdxarZSOZuJpF6Dew2G2J\nW+yCAg3BB/iRnf1pUtuP6N1HMXP6bLUkI19KknaOkjVl4egO8BWo1rQSLzup\n9HZaWHmBLCmWYdoBTfz8BqPMaEhJ1CxtRZp36OQPGNlBho7hM37NeV9bRpYw\nugrmuYd71GbgLM0ngUWs00C+c49maJoJ6PqeHBpm7AoouefUclINVmm+bM9Q\n5Unk/BwhrpiUWN/nktGC3fWvpxL8Z6aGKcJqibxS8YJSiH3668nC38LN94Lb\nzWGJcqzrXZ3aGU9P9EfTsWvyg8BBnqXbeb0c0/+TpdcLjSSRZjRAH3DHKl75\nqaQMKJODPY1t3fwR2h2gIsiX0iUwomoNnfrq6v1fLHLuXYZ3RvihkZMklC+Z\nDgHO\r\n=Bo2w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD0/Ifv+RO34solVNCENgBumBqnnHvo9v20nY9BPJt8wIgbJ1pn/yEFM6mFzu3hBMxPp3hfPCwuOQKoH2b0ZV5M/s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.f60de7df.0_1611185780144_0.4494395655716108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.664a2927.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yFLLavcM15RvTsOU4Ke+s9KVYbeoBHFph6O43bBK9FImgxN0UkNFEQcxeWHpLYHAYI0iQgUT01hxlbrGP+U+eQ==","shasum":"e69f313548cce0767e592054e7f3dd912600e387","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdN2CRA9TVsSAnZWagAApCUP+QFHQDrLuqHUW80hjN2X\nd3zfBDK5aEVqMEDjG4jYMQtUreeITxRn5mJgVLACdaHgx6iA16a9DX/04p09\noTYEgiFJQLcBTCfkfe8hrI7I6Vvl8D/OWoRMuAuApHqtHuormuYVRN+7+1J1\nzu75CHSRnKfi3IrBSOF/a0RQVo/1FB8mIpI2AMbo3Bjw9ijSKKvaa2iNqgrD\nS8BHsXk+L1nymR8E+o9ftNIZZB46BsHB4h7h7ZBD7Y6m3mjp40TATfz7Jo0y\nEQfGAnEW+OT4tP2V5yp5P0mxAEe2xkq15oO+XYvZIS80RslkRlMxE3oYeuUK\nH/JZN0kjnZS8OsVOScNxlf7xpJHFQ6nQhZJyrqiXKTqLdLb9FgfNMxggI52/\n3lpxlc6Po0hcTFgUCZfCDKxC4wBamh3/9DHNhDlx+Jbwql/GdGCHKfWUxR4z\nhwd+gdrwJt5vWUhgX+IEbfQzQ9IZEAGJzFgjbFQYjm1o0QgEYWnJcK3KxH/4\nIjwoyhH0NEtlJqAaT2QbGzRNnV9dQAfPauzqvxOimbr/rNTloPDSnsKVQnq7\n8L9NjQfsE2h+J1bPo/93SDWrPprIlQ5o1EwBOLyoqcOZ6UQDoerXvoRzLsWF\nB45iYBG1i//yndbSQAzWt3wniAMcZcYZyKevZpYm0c+iaW81bivxjZYo7fhD\nzba9\r\n=+YJz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHF6vAALuGn2EW79l811PZqZ1tO4KVdVEsMWGUkk4TxoAiEAxbCh18BeyVdlr5Snn04p3yiuoj9exs2LjaeedovQXtE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.664a2927.0_1611256694379_0.352664919289176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.a6d312e5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mzZ6TyN7yVRy6Zpmdo0apJlS4PT6fBq80iSw20Gbi8VQwMh7BPhvyHswkveiMbh1c9W82cAOxzPto7lT7UQxhA==","shasum":"141dee05f8f51c0a6dbebb6c936cd3409468c2f7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZhCRA9TVsSAnZWagAAOP0P/3F22pIOyCS47aTammjK\n8L6ezrgonOC1lVlIRzeS0isXLoLjUrw+suvZSHLeqdJfeMCb9c4dDdCv4qrL\n54NlrljY+LhCegRM4HZhc7QON3JTdh4xRo4g1tLJ8O/CHEA6WlaSIMIyy5At\n1ObMKOe3tOsVI+fBobr+Tdwo71ukwdmObj4mNjRqUVwpvxKWl3RsaUQFS9aZ\nLeAtRixR0eR7FnqxAYh9LBxaTr64uD3tFD9pGpPS0gwWpT3lzBADYdXhhTN8\n5GvKZuSgeDZwHay/lbDjj2EV2AEpKqgh6JgiYLFVsGvyYnXi+1yv6utIoHIO\nb5CgKMckEL7g5edCYlhhttfP40a+1P5D5rBARemC6wGMOC6R+HBwAkY2O66W\n6WeLIIbBJPMIcVjeQ8AFEmwaG9+8lsGVQHBYDYRdpSW8PRElc/rSwkRs5VyM\nLo7CK9cxjE7dGfQko0oCjvt3jlWnWzpzIeFxGvL5vKB7lQsotmVN5XptaDrz\n6C/uQz1U/2vgQQcIvhz+FcrcVn0AfRi2bAn0SjFkjttJBjP8HkSQBGXDNraP\nmAdIDcyykNJIorUFsCtpJXaoD6JNKAjtVEYI5Efe63R6rX4DXqGe5MsbjbnP\nevcq2df6FWUFI5/VaRja0CIuJB7G7DPRFxc3dutyFe/Dc1ZSEQkLil+7BGtx\njKkC\r\n=g4+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqAtpSZFLEnqOZeRHBJi5ve+oi/YofsqlgRk1Uq/AFiAIhAP13Rne/eNGi70e677pni49tK13bmIv94iQ/xhdwYRF9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.a6d312e5.0_1611265633173_0.973956931351744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.027365eb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oxuYH5IiYpPT9UU22Kl606fA7ae6G3b0L6Cviua6QyuGzxsd8735rHupmT79YI3V2Wt7OEXACigarBua+ytisg==","shasum":"85e2c948cbeb588f12c5c61eddb0431f04a96266","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":66537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz59CRA9TVsSAnZWagAAUEYP/i3TRSVut0tCT3tyL0JN\nVQJVUAsjhhZmdbMNuymBnhRLf593i6uM5SuLzY2wrrgOnaxao0hkf7twq+Bl\nYlGOd1dm+nvDsObayB8aXJiIZBnlhfWpn63wMbq5+reKhVTtaxMvpCv9Wrq3\nf2BNiaaajsXTdSUF7AodsIcLIPwn4SpHZSPhLzx+3FxfTJ0Bfmo7/+QXQvar\n45Whe+FhsSyADeFuJuz3Q7ahHhClyk9SPWm13VoGBixD51Lw3IaqCnYZPLC5\nConmQGAGCif0r5zXM1iUnjqpagsRZj5b4vFBQBO8iy/vE/VRVmS0c9Fe6LN1\n16e2k8Ts1Y2AushLUf91mtkLURezT1AhL+aLxbYtkEmFoTrh3GrPB9Jo5CXc\nemrA8+vfKbhUzc9i+SDOYOTJPtvGpvDGnclqQYqIqIyXm3FePbT3JyzHkPfq\nBeGbfP+kWFgNZRluYnLber6cqR0vabaBlrde8eJuhA3RlLOkhk6GszqcTJrF\nwPZo95HAE1/TUEQZD71XQb0Z5HmqBNY+c/YT/bAAezT9z1BB2RB80jziY/Hl\nk/jMcJ9TfBtc18Xfa4Unj8UJCTE2Oz2n8orSmdFmKrdT4KpY9xvW64N93j11\nbndhimuXVRkQBZTClfAoj6wIJTME0ttWccl8pFtavpzMo21ffjN05duqGpX+\ndPio\r\n=jytg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxVc45ZsYon36lFDzEEGwXO75yMrQCaniU2zxb+RcYgAiBMvSMBlxqMVmxvN+RqrJ3s6ZVzvZ50mTnXAdlvk7puOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.027365eb.0_1611349628999_0.7347507796555726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.7e72b66d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QgEQCuJtAiWGrG7C4+ZJOb6njQLdbw1ri52WMhFjX2dxlpiDQWHNUFgd/RQh5iG9qmFUOrG+znqIr3weFQNryw==","shasum":"e9ee641c54c56d62cc0b48a694409c78167551b4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18RCRA9TVsSAnZWagAAqmMP/36zWgYOVB9N3sKWD6wK\nhzgWYmyZrx/7g+nggn5pIzomstat8EdvjoDRfR0IJ5zrMqTBqYCX1mXFHFPn\nfwydsItRGSvEHqwCk+woYOryIGhnjJU2PGtwacOAhYIVDMBp7CN4U3ne45RO\nvWd93DkKm2N+gJjiBGzfuPG0URFIFN0iYk94HhJgBC3YDtt1OXWkQ1OKO7t4\n6eSjEO4DGeJi9iR2wmN0FxNGO+vuSJjifuz6bWzCK25ZoJ3g99eSHlsJwi5F\nDfjmzs4aYzJI4hzmusU9FvqEjY568HayNEQlc4sRe6Qj8ilkVairKS+omcBH\nw2ib/jojS5CTc6LGJsENIB4N0K6iLfCo8V1bIn0uI2GK0jCFxvUmQ7rNkUHP\nNuHeAYHdCHsMn4uBjRjrNHiUHYxVYgd0zDE+BNTqV8at5p0czh17tlvRoB5s\nfnORiqJtIaZE3pGb3WkMX43Nl/Xsup/TkZOj9IcljXTjNbYaOPk60OiwLvH/\nGy/Pjy3sQMa3rcTBlKMsbPBkG8ghYUv/ICqeGLC7RDYVDvJnDuVIgCpQukxy\nSFP8w6Iuv5QPQ6g3Ee8THf9NTJxwtrjrh6a7VoxAouRE6FbSltpCMUur0gkO\nGo2Y1uZdjmRa/dGmLBSz5DDHjEYYcq/7iiUKBPuJSKyXg+2YAp4lSZJZJFua\nNvEX\r\n=71Hf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNuGTVyqEoDZYzZPcJ/7ac/liKHmJdGDe+YWYrSg/AjAIhAMvMBrPd0m3Do9cipqUyJDMVPb9Q50wnM/UnCn8nQ/4z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.7e72b66d.0_1611357968844_0.1792843342398045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DMEf5crDqeid5t39off7yNwSmkMrSLv4C32TPpzXk3SWfY4nJmorY1joE7kRYXKDl+JdsB7HDeR+vLP5rJ63rw==","shasum":"d5529adaa0e2d027400a97ad1b0672accd20b91f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CNCRA9TVsSAnZWagAAl4MP/AiaVb3EMGay6xm5ielK\n0S/cv9PRdV6fVHVWOT5GKB1zcZ5sZy+4PSeTjYoS5EhgZZl1K363s2FL+kz6\nDnot2P3RWYdo8XvgRQcgFExp7jXtWIvrWtNZjH9hjZB52Wx+717VJEGQekHK\n0jtoHZGv1vsHCdYTIMwWI+4R1rsWStIwWWcoXH2T1RLaSCL8GzHrPygeqChJ\n0sgAhibsONHLkEj/XKXXa64N6W7JedIjMDWcYtnYKb/TgsLB2g0rD++9Deko\nwjC2tRS+6+ekcJI4bo25IKHtWxNwjXCtOQ7vpVrg+XlX/oLzMmqlpx9EoXOg\nafxNIPmFQWTlbvNngXCdELukcJh/L78nD5udWDT4rCUo0rshtGihq9sxTgwI\nzIWG/AXd0nMBnS6e5PcetjSWauLsnP2XOQNhGp6UJN8MyjNxQmunATFbvdLZ\nmIv/1gMCsCDHREwWA8c1X1f3kzo2GW8KCfmYqoigCCj4dfABRp+9UqNEiSMr\nzr2AguCDaOHux4gzmKZ3hbC66VmTH/luxPMHsg67St6WePs6GOAUOku51FC8\nHo+Bpy7eGtvunpU3V4GSQRpttgAKfkQv7wMBsdqwJbfAShMto+Obbf98ptM0\nTKCZfW6q2AeLK0wAlt1l2WHIogKZSrOMvXp87kybYxyNwrWt29kWbT0kfNXn\ntoSH\r\n=yPDl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD64aDnZnKdWN7rSgfMw7ULrPivHxm9XqoEGrf8kpFDSgIhALrAyi04PtiiSy5ZdcuhoNbinGxgJfYdABZUM/O0mEMV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.a6d6a1e7.0_1611358349087_0.9037323394950194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b95fe100.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LzlLWFg4TxraYQE3PQwhASRGMifoLabw+2Pc6XZh1e7Q3miwYA9ZkF2D5fGIr23iGoWDnvPecJP9qbQSBAPZVw==","shasum":"1cc4250c304fd18b453ccbf1ab250d4cfb42fc3d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UGCRA9TVsSAnZWagAAAZEP+gMg19j/23smYd0f28tA\nPGUimtVumlILQi30YNIeICuH0sb/sWwdIgr/ZY0jX3KnEESffdTk2PWxpJX6\nKBm/er6l8bbJBQeS09ZT/ox89FlvxHQvdwtUiJwxZkojIRUP2u2gojFZ/AO5\nnp2DhyfF0oKKTTeKcTqSimxcw2r88xBezGc1fqr4wxhaO1prP0bYsGPes9bx\n3P79CNdAg//Gi0VOcKWYcfJi3YKtMOvPUKswSAk8VY6FR9LQh5H7FekWfou9\n4A1KVXr+xqXwcJylJ9FEJknk6ccpUe0eYMpKW26vEL6R256x/qyunu2+SSqX\n2WZXOlyqy8aTjdxPaj+6/pCJ2gEgzHOdfdPvg7HxN/51s3pTonT12zgC86Wl\n68cfpvmr3QViCufUJKrhsKGTu8uyEkilloE9l5w9Z7uOOTIEtaK4+d9QBha9\no/I0p6i7SsHHZilPoYd4dbOvjcCkLCZAr1cJ8krOSHTuB0f2O85uK008e5Ia\nQj/IqC3HRrbOye+ncmWb5sD9TWt/sUOCSXYLm0ahmzE4uW+eXKHafCpTHE0T\nlZHSMcltTVT5tVoFqqoQ6CIREaEBXbRoL5kseBAXLn3j1C/mh0DKI/TVhXCA\nS9bzNTwhWQy2mga17TlFlthW94EkCTb5v+hCC/NpRK1vByt03G9aOLdt7YGm\nmRuA\r\n=VGDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbg9y09uDzaqCZp20JbgUGvLnTbjPyKPpRSvxTk0rxOAIgV4CAv3IuSdBJBcAlcsGrovgJNvrIU7T67LmPYxYQG40="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b95fe100.0_1611359494243_0.717815953681473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c8797192.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ULhiOzlhk32cz4me37ZeaF89Yldvh8mRxCtN7fG38+YMSBomuTLhs7b+Z4cbnXGKd6Jte8RM6bZRfhe91drDhA==","shasum":"0314fc1d53099db7903e27ddc60d43bb2a01078a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ihCRA9TVsSAnZWagAAyUgP/jYwwjqaaF33G/2MphAt\n0j69n5HvagcyHIPxL+/t0eAuuBMJ1gvuF8ofx81UdMvShEzGxdKNmhHyfWGZ\n2gB0YbT8tcdeLyg6XXzzNtI3qPwWLNpA3AcuISFnhYCPnv8nHpEjbeyF90tq\nK+EzrUSJqzp8ZA5jPlyqPqcbozApmnIu4F6PLvMPHaYTAkL3sX/pyeaWUmnx\nMh9diW5IM/yhSFiuL/v+hJbxX3p+SYh37iA/LCXXPMNrwTb5Tbg59a42+xEL\nZxJ179EsDWlL9zo1DDA3OPryAhRaMIOTGX7vksEYLEQV6MrvlKD5CRgkmRCy\nfUSISMVJXCvmvNKo2HM6ZSpR07px1JyTvllWKmxC1mv/yDkIUuLmXvaI09kA\nIrpESOLL86ZcjyS2XfEnTAv64g6ePqIbipYT/dGniygIlyP1sG6+8w64okjz\nOAo/XSai6gRufwwQd/y4Xn0Rhjq+F+CnYdtRtvATfSOm1E0Ig4DQEkmeCWpS\n7bfpbHnshbCEn5fJ0InK2p8Qz//NnPvxXJActsdkbBKLiwnsgM+frnjgwA19\nSfU5WUpXVnlGGcFQ5OwlHhCnZdfHHaQUZbb1K8nyi1D7VAVpvC37VQFxXAua\nzjW8rhzqXeyJ4zHo0i/GUvqqypvw+FQMK6XZAlVjyLSQTZHAHVEuhMON8bqH\nzH6w\r\n=n6Ik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA5WvBQ0mG8Hm4WoCbfYZ+0Bb1UNEvety4N9/20XSTHQIgaGYfCIJLqMDzROOCfx3wdUTxo6rILxQcSLMWIt6U+SE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c8797192.0_1611360416837_0.28153550256947657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.946f5563.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6EOOxhgCCtoczEjWCR+nX7E76Csl/SwuSExMoGg+iFiBF4aB7rGNqTMzOgEWoNSJs5miGIzL8QnYco7urUtDmg==","shasum":"63e757d465efdf689c515f78ebcaca77a0aa6c1a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EaCRA9TVsSAnZWagAANEAP/1IA1qc5ZSe9QSSDiRcs\nbaOB92OAk/8GcKXEXcCdQ1DTeYZUqvv5oITjhyA7TJba6EWLSatqJPJNpfaC\nv6mBHRenSNib5cY2RYXZZa+jlaLPvEWHG1JreKQX3sbVqV2e6AajReBvzAxC\nz4USaC36kONeUkDL00Pp5A526nzt3u3lo/NzLmakoRqlMCV3+rlXBj28abkk\nW0s0ROrAOg34A+W3D7z4DmmINsbnxR+AObK9UBRjW9C0ZlOi3jMu/X5DosLB\nKj7A8TtrDC0dVsb3grF9BuCDw44KCIOzUN8MDcV4w1jNur001RlVqpKd3TJo\nDEcHMvg/YrI8vkefUllW8nXLIh32LZvBUI/Ip2flKVdvv23+kULooyu3klf/\nQogNhHjSeTn3etOpl7CUHwlLqLpVfzRm4K6CPf5PCFC7AJHCl6QTTnrj7kAP\nCKuRyUXVK19c0O5L60EthlUpnOEXGLw97Iyb5pTY1ZvnCXAJQ3qv1u0x0L9P\nrQUKHq8SkeFXr0p2viHQ+COPa4wRHjr0UKW4oMcT/22Sb5w4D8h0g9sKMwqf\nG4tgK1E0K755NucVwgvYxlyntPivDmX6lMHiYM0jvAXWfkrrPw6RfjM/jv0c\nf3YoP6Z52ML5+LrPhx/MaocVRbBx1LXbcRYFK8W/PNe9bJ3IzJECMUSQcPUy\nz6fG\r\n=sWzI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE7gWZoNIv6oxy+d+DtXoqzdHtCddKnyWPJ4aLp5J+bQIgV1HdUXFwOEPut8tRldZBpDg2VpC7sZ58fbV6/k6BSj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.946f5563.0_1611362586402_0.9085851695061891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.43664f0e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8Rtgxcgfa4xihOlA2j/Gd4klfHW4i6OXyTFbzgtmMAYZYl4gfs0u//+XvfF1Cea9uB1MmrONoDeFiHyfCoCaWA==","shasum":"1ef52947dfcd96bd0add5d8dacbc37b798caf883","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0iwCRA9TVsSAnZWagAAS5MP/A0KkEga2QpKcPStPr/o\n+gd2dBv4lNDYT2UGVPgIVNcrHgKVdzmf8P9vasr4Xz3YK68AD5/iKlgxrF88\nl2YhCvJaYP5JzmTt+qT6k4g7EKOEg/NDa9VbB4cCkd4S3MNseuf3CAGPQqQr\nQuT0u5t+exECefJ2Mte564nozmki8CYBqAIXOQo9opEQoW7cRMNShzPZmQyZ\nO2vHRyF2HdUXnsPGPugSiidOZCx09NQ/I/dQPHaAO4zR/f75uLXISZutbgM/\nzMa2V62kWvqX2AOEB/3ibl+OZnm7rHXaVCPL+d3ez1V9+Tpq7hTvN5h3YvyR\n4P1B5910JIph9yXj10SR3KZGrXwN8SyelwWEaz6pQwHenO2P7A5gtul/es2w\npC854VyVuHxqaPP83H/cL2MAnBWYHSDnlwALfdpJwuMCkLjw9LwN7qeLF5Jl\nDOTMD7X5QYJ25zT9+0iE+wjoC97w6IUc/30V0kiOpY6Ihtd8M/+s1ZpyDJCq\nTSSdF+BmNKlWOiVXFw15JAIeVitAMPPih5Pw8Ll4n/0Jz3QPequ5dAEZPofk\nsJC9mUG6BhqQsee+4Noa8zZVTjgk78iaguRunUE3LP0qSwC/VnCERaIR6hRB\n+SrOZ0fPpvYF8yvqG2EmTBB9klcczQ5dn3xlgUDppdlBoJ+xQ4C0f3GEH7We\nXn/B\r\n=b/Qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvuLojVetWbfxInrqz1t7fwofP/DzqQDXuo1udbWCcmAiA5K13ydEP9Ua4X64Mk1tEohcR22fT25CpL+0OY4AoDOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.43664f0e.0_1611614384171_0.6134952766372461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2e769e3c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UuuEyDM5T/zAzIP5irOtPuw9K3KJiWKAkHOJOxQ3oGbetahnwdUqu5ad7CVkjwErgJWCipr95n4FQTqrXPVmyg==","shasum":"7d05741a55ddad051a6d4d34724cce378f1b9716","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zlCRA9TVsSAnZWagAAsyQP/ReNBZ713EOSgq60FhWT\ncLMMKOWKrXqY5XQtWNb/WDI3l7kdRA7mA/dfPEVPRMp2MwG9ZsbEAnLw6Mk+\nrGZHKl/TTKUHWz4mQ1i5LsTgTjGrsD4sf8OidqRtI367CigKxVq+o39ioFY5\nu1kBz3Y0dRnuAcQGuGKQME0pp7ELaIwv+ZD560qi1dDsjzfdjlOeHWg1DSDJ\nmZ3zrxvyE6WC8evhrmHkIdMfaiHdPFZ5oD1bIsvVNPW4I4o1J2UJ/YULxy4q\nC+4MU8ZN2TBDKIHrmcvJHEDHzkxcjfnYGkO9cZLON6wi12DBKWRYGSSDtPye\n6PsxZnZqJpClqYIeDqcvb1fZq8+9vmXqps5mD+xTefoscHmAHsEpkghuHiPI\nBEqfIKBhPUA577MweHQoruQL0//3R+52RfL0nRwfD8h3mh9CC5UqBtpeH+Xf\nIFCfHSj958HWR7uT1xFIiJFqaKVAlwF8f4YBE3q0Kse2TT+glVww3+74J5BW\nSuuzD7tjzOGcSauh+x0TCskarY6yJxfRxzt9KJiO9/6epy5EQxReSasQ+bH2\nIX9J36KHePC4n/KDAck7lXIFNgtDK+fcIXlmub2V9fEYh4oiYaVAV9MuIUyQ\n4EU9eLJ3ulhc519sslMAO1spezpxlNHDrGovL715h4GKyxibifPruqkAF/hR\n14Ed\r\n=L8pL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfznA21janc0BYOA230RzAhj2wmwwJhrrhSlYf/WmvDAiBehHYpVIyXMuyYbaMe9Fr5cvclXScXAXeiQtEteVIFEg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2e769e3c.0_1611619556547_0.9507410220006554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.14e01610.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3drQFtZJNMZ2Y3vFCVJeO5MzrzhLgaPDXbu3PMyYCjHI25bZ6mdkJnBv8fWi4xl5TzP85dZIRYniVD4rfU5iZA==","shasum":"ab30f3fe23b959319744f22555ba98d155d476e0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQqCRA9TVsSAnZWagAAeXsP/08tlc58RU8tCqIHLI2o\nMCWgqmGIAtZExJNYperitHOzJNCmdtGflYbSO+/zoaLRO3K95uDSCVwTkTBn\n7os2l4RunxQj7smGLxV/HL+2uLCVZlTMQ424IeqJATrewqJMejis/Mog2PTy\nwezhEUXX312UV9uwc2eu33IUNAUUBNTciUAPBOknO+2LxHwgnzXdp9W09jl9\noX8fz/xXafF5vXfzRP81+wyOpeWVq/1qKUYauE7uJToDMMIC+DNVmkeHSseG\nPrUYLWCUVh2kOO+/5o5ksuHKhBBBBNsE6YKvZ+lOdHv3yQBTe6Dt4ksD2u2V\nLPHiBnooB8DyYeODdC/ZDp5mhU70scjouxoNzuIUHQFey9LcwupyW72+hWQD\nqRUa3LbT257glsuMfYuo1H1GzGge2Ealx3DOE2VmybnTkWltrNh9AVvwAVpR\nf5oO97kW/GgkSr1Zuj+EpllwKyP7KIzYYk5tarw6CMRTvcQ0DlESOyGPO3Zd\n6x04PIabOKlJXYgBsoc3q31rhTihFZBJt3UpJZiuspbDFOu1zv81bCca1FhP\ndMOqGdOh4wJIUFbdUDlwRC7og7DEc4SrbcbRE6kDayKfM0JEM+HcTruQ/Hxx\nod/t49QA+6fRvhcJt4Zf3YwJBWkfkeHI6diYLD9GZ+RKhl80yxsPduO3jrZX\n1Lnl\r\n=wgp0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYWQyJQ12Eoa488ltTy8DLv1AaUc9aCgk0kdthqq9K0AiBFLjmq/9wzMP30j6vnZ5akQCDF2DQAKf5xIJkR7IX3SQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.14e01610.0_1611777066213_0.4843400265226687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5de00c1b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6hdMui0PRdp2yfmNz5U3Np71hORDKZOkUVKj2qGTIfQeLGf6bhSTX66Wd63K6RcqHBYzkvsgVjrzc9HqcyMZMQ==","shasum":"8ea72982c2616ae658a46a811717d9cc276a1a74","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcowCRA9TVsSAnZWagAAMZwP/0q4lH+YNnPFfyKhqPxC\ngm2pPfL38YMcCVlwyja4ykHiJxfxlEf31aWqBNQbK4eFHBt/MUWONm0NKSJs\nWowkix76PLw3zzMNYFbaWVuOVh9J+1pX7OVUU0RoVd0PdQz1lVfQaMwcvPVR\n4KkT9QnmRuhgmD2ParMRwmQMq6ZDi9nPOXn44HzeL6kv8P5XGwGmxaTmhe+K\n9pdpEb7I51+ElTNBHbfs53rCbTqz5iVWP243oRc0Ja15BXHhwfLQoGU35x2D\n2dAYm+pBY3ZdiM8ixLmQARakFy/Sr768fv8EuxDpfz3wQ+kwUG2/HRslOP6Q\nAloXWBCaKCfSYyBTXQtSRe9UP5Wg5Rvgg4zWHXx/o+QEOdFwyZGaZfplHCmx\nu7jGcCQTnh2MsbDRs/AuiZS3ytxmyMaBPHuV4uHY7HX+nLQhxHnWiI6fOUqg\nbUarScPGkZuGRb0og2mDMJ1LBN8jv3pzDWp5noa4OGoE7OfPbqogZ32iq3kb\nE3B6K0kU0b8pB80RVZJDGohbVvZCsAgNnhr+hteyQ07bMvvInNi2OgYM+dUj\nf9r9i1ymTAoNKmv0v61P0oW/XOz9g1QlKeASs3CgYclmw0EGHjFrLp/Ri5gv\ngg5657AuLgba5RgjnfLcd4GNKB6GsXMOj8BHCfpEknL/bRVqwtaE5SJCjqav\nJSd2\r\n=Yoyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7xspXEaz2VdIZzq/+sPs1X+r4RY4pQplwL44yrMw6OgIhANVhGP+emf6PSHd6cvRypkeC4bI75Lm8eCdJrYqEBuoS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5de00c1b.0_1611778608295_0.41297215573593826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5a328336.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-IkQIztSDg3HTbGKiBW69BYrG5WPk1LJog+xMFLJuqjA1/yQdqw8qYs5gpvapT/50DU/7AeA0Jk+9+c4Wa8AAmw==","shasum":"18c3416ea2f05701c7536e58a57144f23480cbb8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZqCRA9TVsSAnZWagAApj0QAJKdhQZ8zppUDdu3Kx20\n8HTszfV4qSliVYmduUCqylBvnSTAz2XHYJXphjSreg2sFlYiSTaI7qIa5G++\nRhyFPtLrPJH3IfYZIgkgZFCNhVe33ma0i3r2C/eWcUm1V7vK1AaeqRY6l+eJ\nbBU24pgmKKdLq31y5NNgdyuZSxgAz2E2XfLPiu+ClApAd3wxq2PGKDZazlfM\nlhT9Z8qfIW0idqiN1WT8SZRsuKWGz6p242K/w9DMHI+YMUl6MfxlwpEzswlI\nbMmlKVv2lPlC4oE+Pl9LkTAKtylwRQ/MMMQzVurWX7/wv7/Srv3VPEWJGKt6\nWEwndtKFIJObgLJYbCpF13yPFxlHRw3pDlirFUNrudsUTE6rEloVLujEVJZi\nd5YTaKzj5Rd2R3i1YEXobUe1lpWXYUNIXzsJrUSWHcUrsY7P8N0fdIIwLGHz\n7w+wOXz83K21LtH1CLSINi31QqJKMKdzspBIC2WHoYkzMlB1IoSTttGeEW3K\nz0JPVFiX1R5qIGjlBMXCH34oHezkAS7faZZjhMhMmPRq4EE90VP4w4kBdMGg\nB1FZQYG3oFipegZHJrO9gK9jeUpn6mCWQqGeP+3x6SfYlDDq/BrciNukNx8Q\niaCZ0hVyoEqto6MhYx8pyB3BmYW0CAqwj/Fczbb/56m+3OPepgwGTs+XDxPY\nYEWH\r\n=gnYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDx8KVfYimYyRzNju4hI1Jab0m9XimiJKA+mwKzPH7NvAiBFDofQfGSJkEMr37tesEWS/E35yG4hm2/h962PbnAJYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5a328336.0_1611863657710_0.34732158546373015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.533b1251.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-By2cakh1JbxICL7K1Abrec+7Cl36wGTvHMMF6K3ZSDrbZXh9S8dgHw2aDmjd9389OCNUlZYqqYfPqrKZ8wFc+A==","shasum":"067c541deb3c01110dba79d5db9d16b05395d85d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWVCRA9TVsSAnZWagAAiwoP/RPJQFB0bhsnnPPzjhBM\nBnj+UQTvceH2ovDxG25EgUna3gjJnYwvljjH09QsW2s6rafEWWh5KjXFTPYq\nWUmmOchkssJS15ZhToJ+duS3lueiLlUSy/BLPH8M8+7WCxrKCy4WIGFunQBz\nh8lbK0itkQo9JKRpNRVZTMqiqrC5AX6TyVkqflbq9C7MPCC/GbNcsJoOawAF\nhC8SxcCOe+d7q25D8fWgrGaKf4aD5cEQaaA6JFgwB5+GA1rIG+M61O7t70TU\njuBP8Dq0gl6pUcnERvyTHlVQHrddAL4pDplST4mgdMEL+KerfnxbzaToQava\nbTRMCnw4HNRefv8laWCs/YUtQ5BB5iiJTWAuauEdRHv0U7HV4zysbph/eLbC\nz473b11f3EBs0t2XoycwLurkm1F0pcgbw1aGoBA5OH1fYKX51V8pWUGmU+Ac\naaQIZYNcNOmXtyQDT2eC6xUqB5moPs4IRi7AhOdfSQmbENuIITq/J4RMf1bv\nU70zGEJD35G6Qy/9fceDIEv8WzCoesTItk4qiC07HfGJfcmlzB7x+YCCgq+s\nVjTtKMq3ELkjaZ0dqRSy0w0O9MycQQ6JiPP0WdOwled/7oJAM+dlIYLUXsox\nNelFK0AA2UqoRmDe09tp+JMCubFSGcamtcRiee/47jLOqSTQaHx58N6PW+ky\nTRBi\r\n=yhk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF75YYvVEH5s3eWs88Me+QzJzQ7DCvzOxvdsa6Fsg/awAiATyQpgt8nXtDTHZ8mjp+5Yk8Ux4fmkYrBZqtfsdGtEDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.533b1251.0_1611933076932_0.35839037219291336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LKISUTMQUPZ2XbFfvH/njIsPrIdCSUYoT03+vlOz/iAALsDaTsjdnaMieM0R/OK4C4eg3VkOtc7GKuWEBVm+tQ==","shasum":"261342efe597dee22075172008a7467f5ac1c89a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNECRA9TVsSAnZWagAAVhYQAIj5gYEUoA0A/bCTKHph\nJY28s95MDUr/AtzpWSeywUt6wPf5UBE6l67+jlyBDMpHH071Rm3YuXJbmQzJ\nwowx5Sa1tVTjMVcaEn/DhvQGrpqOJYZ1F05GZR0lHCHX4gmXEFtroBIwx9if\nuAG9FgRE69ph5dZAObJPSrvYm4ktKCWT4gyuWYdqdXH+o+1X4MRsB36BlxjN\ne65+yELJl7zzLhyLfTBy7XdgPFUGgJVhsXQlbPlCW8sVNZ3B8pDHjgO46z16\nDVuOFQ3iq/G6AtNqAwp5KlGoNgCgXduXEhEiud8UMVGV4ZqONJrwZZ163oj7\nfGeRnJ7+bpoZagrHFmVxFkEe7jRVoNBkRxhMRdNOVaEKFWt/IIHZKKbZd7rT\nn0MxvHalTerq9TQXZmaXrLNSwbQu4+5bug14DSXuNQhZ/ET/IrYhv0q05Sjh\n5QFL7d+AZK6ol5GTvPL6zhmEwAYxY5tmQcED7LXohS2WtdZRupSA1z7bkApA\nFAJczxSWTwOg1jOTX1IrwFh9UFSvK5gu2qHm3BdVhlsHzpOrWugYuxXzH12o\nC7RDk12dYam9DL20jfCXcFhVaGY8Nny8+2RSYBrjhTlhdUpxJQkcDy/MpKel\n5DS2wHU6cZa6mjO4D/pPC+Q2P74PFbVXEGdXspzO9smzEGKPijWIi/xETsEV\nKqPm\r\n=9VUk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaveBkiagbrHnhLblAetgrVoUXDDhji0pHaI38IFlFowIgG0Na/JzCK1hI/vNSrUpeePhXdQ5ercSafX4QbFS4Ik0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.ab5c0a10.0_1612297027974_0.6559912624181485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b7a40b27.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-z2iduc3Egf0rGaHfyvCuBT29RAuquAzZiDvIXMsHtSVmsFs9Vx216bmEmOi3jGJHVKaNuUPlzG6e4ZSW0NLWUQ==","shasum":"38cae3f7ca6bad70003a9a73e0e7ee8ba3206144","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtACRA9TVsSAnZWagAAlWcQAJyyyav844/+ePxQ3Iaa\nJLoymfBrOp58b7WtcZeuTwSIE8XhASSY01+Rh0u8h76bCDZutj+Nu7TTlhWB\n2JYKUFhMtXiG5DTsnH4yIdsZUhYqel8r0YGjv1eTyTmqLIf8ROiWhWMGeXjo\nxvT4CedDgW0ZOHSrJEuZMf0NOwwv2j65gzPjB3EQU0dq1c8k9oCKlDo4QVJy\nSxa16M/b3yKNsSGSCZ6An82wFaibt6gjQYX5zsAUw7ZptuZXmuKTtlzoX1w/\n2eRQvEWvy+vHUaaElSBlmWR7D+JlzM2iSUQNevxW87Yy6U5AH4qlj7nYBMlq\nCVJPhr7O5Hv9gp17IRT55lnuxctdt7L4VXsyxajpXl/Z7S55zmuQ80nAw/Rv\ncR1Bd/4f5KI2CWXQWGz9BirP6BQlVzRtmXTnZx2FQqxVjlCq921kP/enVMac\n+jobjeDVRPwP6vsph38H/XyGFkWUN/8iXDzKzrqIPgZoEdKcuTkiwHxChsff\nubf5wRzUU0Vl0bJ1qSQS3lQtvLcvYkTbI3jsIl+wyQJgFbYchM3ET87YWPQL\nOOVrlcG7baNP8tzJoc3ECQh9eSRXx3hWAXw7apuB5RXELBQ0mYRDIei2VXBG\nTCqsvo7HrGN4m496KywA9XxwBs5Ok1KiR4KJv9Zvn3Kk8djs5KvW/hYZwAz3\nclu3\r\n=wQda\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtf1OMhY9Z6BryYrazJxKLdq7hDAD6D1OWD65Y9B6snQIgfNgBdbyErzD3QpSPUVLHYE6fSOEchTNAUprw+p8Pve8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b7a40b27.0_1612364607677_0.15785076409239585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0fdee204.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-FaRifZMY2po4vHpPKejuI33Yu8kR/dMHJk6lCbhBashDwxPMYouZrqxqAecbXKE1BKdBMw70iMVqWaJkBOLbQg==","shasum":"93cbac465dc2fbca50237e27050d5d9bec794d80","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyICRA9TVsSAnZWagAArPQQAKGdoW8hwLzvM5SRgB6z\nI4gM+C/sTwAyKSltvC+fRO0nGAl8SjKxp627Q8ldUfJftFLrFeWGasnRvOAM\n0TjgjDefHhtI4TOX/zptwPyd2Ofe69TgUMd/j83GgZup8dYGl3l2XeSdCupO\nc8W5Mg8lXoBU/Z4opkKtKuZ53UjH+0W0O7QP8OhxnBBT8KWGgE7FXZ9zlITt\n1l7Ng/UJlRQnwfU9TQe030MpILqYlRUJiRk8SmROKrIpa3w0wqLYyhyS/6w9\nP9S7CiJk8rp4OtVrfpZtFYBjQeRVICfe7DRd4jOvtkO/WNfA0ixzqsySV5va\nLHqMz83ZQnCbIZ1MnNX5eT1Q0VI8MTBOqfejxzzTlysTizJUyK6p3dWizHJL\n7gIRi7VZKYgWe6BokGkv3JLuroP9jABFaV8jfEklHmvOqHMAguseYYgcSyX4\nvV5T0Yr6xKb2+MmNh3tITOXqONcStLEMbOTcv2Z5J8kw9g+97JPSRVejGrKq\nsyRb/rsVhvhFtou2K7Sd611TB5OH+I/jr4PdTfX7POL9y9KVKMVcaJM2FF+g\njzeZPIHGYAV6rLzpptizylL/fKk0/H2DOGQqOWSGSxSisLRDPSQSLw1AiJbr\nJ+TAmznZR0koJjtn7kWlEnOEUOQNmN7q3h0F/BdZ2i9rRFwn98EVjY5ucmZV\ngQOP\r\n=LoTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZW8lU6myyY89Yj7QJ7W2nQl+Xwz03FagMxaylnDH1OAIgFqZt6hZg+w5L7HJPnGYKeG8itvAcUrF8aRMHz10zckU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0fdee204.0_1612377223598_0.9127437484027046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5160e548.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-UP88MSvLq/JVoCaBZvMJKXcstXoauYsUq1Ibe8Of/fiocdOhdsO7+gjHNo6uOK05f9t5xmBV7Z6j+ypfM2ICqA==","shasum":"931817d389e125546fbbb175925b78dbd584c1d0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnhCRA9TVsSAnZWagAAOrEP/3rpQfOX8mhZ8FWhc65r\ndzDE7LeUGVhuqZmba0tvGFQjFP3JwALjbiC0+GYY0z0jCJH95btEsAqyMze9\nXWFsgnSBngtM6EQNHhc3j0liVwWmp0LM5FDIPBWSKGJ1TW8xw+z85xhbLYhT\nVJLxy14TFtICmxMtj0YM/H1w0rOLw+XCA2JIOKlaj8z+aZ9AB8rZXiIq2Glp\nrnobggl1jhz4geYqE2W8bQ/N7TxZaCGEczMPIG07eClFq4TOnBnwPYl++q0r\ntWzXrusPjCdjqlzRfC5542YVAmbRQgCfy04YLmZfGNKisBToQZ8WjOmxRQc0\ngCCZ3iN7o3jQaXUUm07LPFMQMzIXFqHBsHGcvuLaEAv8lP5FSJfIwC74zAu8\n1Ah7BlVO8640XjpkTpH9umHrfG+35Aq32zwKOeRh9TkDd2EdyJxli4awn86y\n/nGwIbN+Jf6vdKJ10RToo+qmHnic113Vru94Cil2/vJzKd0bqkVYk+6kS+O+\nn5QZ8kPje5YyXSaL7e1RzxZMfmCiu1do5WG9DLkjTdiY6CzCauAhi7H0WVN8\nIfVMvzACZjN3PzuSU3kRRj9pRzCDJyQ/1yTaHr48T/92iZdHq4brKWRpVqUc\n0Os0CVbdV3hcUFTQQvApmtvI9sZIrp7uswJcWksVCTsoCmpXXvU8jFJqC3cV\npADT\r\n=UA4J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC230/vK3u0ac/DruAtVemvT9MOyBBWv6EcSNjCZ9VrBQIgJBuUf1KOHJv9/eWM8nTQd2Ry79N1A0NokDUeQPCb1so="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5160e548.0_1612569057355_0.496511549377326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4fa2daec.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-WzhYLXjR1E7ZQ2dL47t6oMkqvd0oGL5AzT1BEeNAZVM5QJBOrDaW3OAQ877t7BxVAM/VIwsHK99qtaRzf7JBtw==","shasum":"e42f69d2d3294f9a792f8ba4a0053f9830519499","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTLCRA9TVsSAnZWagAA7BIQAJPJ+F/4nTTZKwlrYPSF\niZ15frCMjkvVOvBzE4zFPoiND5fX3U24IB5wIxn4PsP0+4PeUKdUOTaz+mVx\n2UiGCD8xvHbb6yDUwYJpFNHqwRAA8UkHvQ7WU5DG8F5KHNR4kl7IDqszWRfj\nPOc/XufAvCbCPpEfQI/Wrt+X5BIcxcayEYPyeATAR2SNGUEJc+Hg4nDLV6lz\n4hznrAc8msktY3uXlum70bytbWw98csi3Sybv/o1r2wi3O9RQjwunTasYFCW\n9HK9GHCuljDcjdVns76YA0siPAAVk4QRHNaHoNpvs7NEsJyBH6Wi23NbkTI3\n+uP0iyqODB9rE4uKPAHnyYvWa6+yJF1+htAk7t60ZBpDIOqjJk+GfnJhONDp\nTCeh6eP2E12vsmdCDKlyDGimtpsb9IWglVEtvKZO8dzPpjBGAaU0UZbW7j39\nt+bJb9CTHnUxo9cXpWLd12Z3Ti2aPJV4VIEr5pOWYkbb9QwTVVUx/QyvDVL1\nLH2m0SJ6bbfyIIochw4Q7gf4s7MMu+Qr6ZncivYXKYCt2PwRoIykMm/uYN/N\nMeuOIp7OvRTidQpYsw/I95wyT6AQUcReARbG/homg82pxBXmrTmbx6AMkdeJ\nzWVUYsN44IBsXKTIHBlUn9js/9I/Tfj61AbGsEp8du6jywoRKzM2XFWiVjS0\nUBwq\r\n=S4NR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3NsAFwn+SxPwk+gnl1bV8ASuquxoTw5jFpTDpbGwAGAiEA1bSRlYpo3KhCyyd1a8DiU7VL6Y/13BfI7lD2GmMvgBM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4fa2daec.0_1612829899119_0.922478666583735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.67f285fb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-rlrYAqaeljLg8a0I1MLN890NbtP7cYsPCztIDcB0MzRIJh3tVktcJ3o8OzLMIIMU+ZHaUZ5ngxWY/UBKwrvdwA==","shasum":"537fe351d75b0381cb29f9a25df3476d0a78e5c3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxjCRA9TVsSAnZWagAAH20P/2/+FF81mk/+JrKT0iq1\nVeCYWdRT3CV1GBV6RX/pG58Yr5j4986fU2fmnJJym5Oo60QaUNBM54/fpQyf\nz5rrSrpzxqv84WYPfvn5HtWLs8P01uBve3l6gZVUwZYuSzm8yWO1QO0r9qYf\nnmamQgfFA4v/Rbb1cKEAR7HcfTHJzHt7kq/xFOXPKSSo8F+ewuYvUgjWUFXM\n7w0AOrqI3/3bKWYIBylZwphSRUmitAkqJrhP9GzQHNtSytVIDW6dURRMc8wV\nrpLvt+AjQmJ4yy2zd7+Lx5p5a+ezF5QG87gs2rf8R2cpTaKpwomaXBc5gVAq\nyq2fdD4DqV1obPxHVc4VMpikeqqLDzcvRkdnN5RQifzfG2RnASrNpCO6NkK0\n4SswXlLz9TNJjsoiU6UO6U9l5TZe6jFMcecmify1iEbXocVB2ZPHpGQrrUan\nQh1RAdUfI90CJ/J8kCbtUHMj4GCkdgfaV0IFDu0KokUbp0Aj0Z7XJTK9VOba\nPePDn+kE26cXRfeDUPRkUqgBaaU1cpol7zMYX0MogXd2NYb6u8feHzyGaCKY\nb25aLzef759oVQ4/lbD5fs3WjxPNpsGN0Y07Q/Z5kSsj5xN902dppwhkKCQ9\nfdPrTVJOyZv5zUfNfGWIOT0YXafVV6kAR9caBpwl+L27gMqAjJEfTazmgSSb\nAqTx\r\n=Jmlg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuXkunXISA+LlfPAO9gOg6VDx9AfNhAvYn8fKarIuqAwIgYJyXpvuAotk7IW87GTtmIeulnRjfdRy6aHWkzpP6Et4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.67f285fb.0_1612831842634_0.20553057333262492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.58cd5a70.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ajbioldMtAC0H3u81yuN5pFsAtHoBJK3Skb3iHgL2dgUr+xLtCXAUmBa/EWWj6GkVFPP8zyUIydp+O+AIss2Qw==","shasum":"55d936d8e752f8a595c85dd9e1ca67987a3ff1f1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZcoCRA9TVsSAnZWagAAF/oQAJZCY7N2gcJsq2YCgDtb\nPmDpRIAYXDR8XkM7h3GcyBPDSaRZx18m+YLU+etuz27nTZv4gXxFtM0toZm9\n2z8nMMSq54qfezXx0v2lvrx1lve35+D/tyB2mBDqyDTqtuLxc3V6OutSLFJA\n0MP27bFoG7PTMzooU4VqCVrAB8R0rX0K4b8OEg2mDxI3jlnIaJqJ86focTr7\njN31Oyr3NVRIwioCWx2BlayhpCXDwOpAcLMdPhFdULrRtqL34OnIuUmue7KO\nv9efoAmNHtYxmJUQbKcsovRtg02/fBMf7GrptcS1JTfkX6Sa45HBoQ19Ueep\nAakAZ4+XD1TnUUeDpitFNm75Qv8o0N/EzkITMqKgepIN9eqgeuU+sAMDAWIj\nsnZt3/tmHEG3p3nFpKvfZRzr4+ND8fg8fMajqj+BnLytok/K0FTe3fwBTE0G\nSjECdHWQuzOwHWYwedD+g6z7RJHW77SqfRWFJBSm+0tAiu8tO/Sn24/xjtJJ\nWfZ3TFu/SpjaD4iM/P9cJGocvbwBJYhQrL/38S/rFBYDeC+97Q8+uKRZtx/E\ns8uatVnPg0nJmfrk41snNp0ZM3laX0zHAVQiSqphEn9+9BVpLtDAX2SU5rPX\nTTPOuXClJZ8ujW6ArCGQ6NbGe38bZJIL8iCv13/z59KNeyM00IwSMSp0BRQm\nQ/HI\r\n=jK/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzbDacNwK35XPkLOBIRqNLSCOW96c4jg2ZyvPMpVwdhAiBey0coYHQ/5qo+uMEK7PnYxvjbbfT7SNdc1wjDVK1Ziw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.58cd5a70.0_1613076263885_0.9603443314389466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.8107ca43.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KIPUOk0WJYb9xNcVdqS1bBS9azXXUtPulyRzkF/CdcL+hirBLgtOWchbmwm6G5bCEHZ6XewFcY+NyMlraLJEzg==","shasum":"79a6d1c89447c24e4d1a2e553a4d78a7345909d3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2kCRA9TVsSAnZWagAAoQYP/RrUm9LUdQ6dep5X+U58\ngEy/GlW8WHlbM1liQmhPxhhDT8lcAoZD5geqBeqLcLb6gHCIX68E+w4J1haq\nQFRRNMj7X8hAXp7zKIUNOO2/oTW12B5WiWNuer6lRzon7SwzIhbl6kOEIcqr\nTQK0c2isGFvtmyu1rpOZnQBqwxwb3c9zCaGvgxwjZqjn2QUuxqRNdfjFlnBl\nJXe98izrlemvQyHsP9+WRC50+YdpNLXY+6nBBFG+NumtJnsO0/az2JFhsKMe\nNFLr1kVu2dtFlkoJF1c19mq6ldjbCtk4/k1kjZ23ALyUlnhpZPw0DwZYOrqB\n/APFsNb6oGhee0vHrf7NzU+F8d6bsgD5dajj3ReTRzaep7sR39WeSukIWDkb\nDAzfMk+OG5MD/2YLt8Fe8EXzKXQXDb0279H2Tc4O+U8xlKuTs8+TP6K0M5RG\nLd9xmDl1Hp+/ezZ5Ko8YQshwJGAkVombx1erC22b1HnyTZMEGQYDxgr5B+X8\nePk4Bh5XkZdlGFxMjj9yZ4mADOvd9CYpPacwm//sbMbYSPV5Sqqv1YTRInaf\nrtOhLfas1+p1vZWgj415hLLNjwPfEA9UlHkTV9spM4VV+aNqUeLnoq7w4Ljw\nCVdQ/vEjyZhgvvF9wRt1ctW9IA/gu1i/Cz3aTjagkIvdIvGKwoHUgOw5H0cL\nmwzY\r\n=8fVm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrU8TtYIXUx2bW5KrPTQzS3bd20d6BV8/rq0RwC/WToAiEAjJ8GUptTm/XTCuUx1xY6Ii09CmM5eF9OETSxR36f3h4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.8107ca43.0_1613086115569_0.11297562929445948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.d35d64ef.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nTWUfKbaZkbsFXMMwrsxHyu2xlDReYdYU5Naa5+C5YhES+1+cmjpzhXMfSmxVwnqnRRoqCRHHJmGNHRlYiVhoA==","shasum":"f23a706ff25ec1d75d37668709716412a6cdabd3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcD2CRA9TVsSAnZWagAAKQQQAJ3y5RgTdBsH8kneE1/4\nhEqQ8clG/gEwLrxTK10aAcEycAz165+FDUEG3UmWPRiI4r5HA5d+ls7Kf25M\nozcmSE7NcgE9nDhMotg11CDo0nYloL7G+22lcTsqFtAwYromLvcVGznXHQ2y\nSh57/ovshkeDQQeMiAiIfW5hUzBKxK368P4ld/lny1mvP8q1x2kId081txWZ\n5hWspNFgxW7d3mCcz+MIhnsZYGuRm1DNSP7x08ENVIK3i2ALW2T+tmEoDN0h\nT2yfRyIOfrlYBN9jUIy5ANVpSQQNx1M7CoB4+jY6tQ1hBTzLune5LgZ5uXGl\n1sM/0CqeeQxx5P9RdyCkDH+RXr/CaFXBtkORy5PMQ+ARds3h7BhnMdg/CrjQ\n/aNXJ09k+RH8v96sDTVM/029OyhY0DsTEAI6HY4y1hpuFjxjtQT6fJb6acY5\nMyF0gphhZwqMNm5umN49MAhlpTB8yJ9XUlB0TrVPZiTkWyPdIRkq0U+s4/z0\nI/KTlltguYPevn+JdH6vn7F7Xoxc7SXAbCL5EU12rRNdnEwehUqfWLMRGDm2\ng8uXMMJ+qCHG/qzbiUDXDKNA5S2MsNGwXLyjP+WM2mstifMn58mJdXgZjbSq\ndriQpBW9RJIaP6QH9ioEMkD1RVpaXbgRL56dY2FFPsUZ19kzZyNDH6szjQzk\nfOMy\r\n=I3BS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfN7QTQdd4W+pGAF17hZg9H7dPb74kPlZhgxRRVim2FQIgTSGLdero+UCafibmgSMX+PciDsLDrMMhfC0ns60aSXU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.d35d64ef.0_1613086966009_0.15806882688278834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.78bcf058.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DBNHSjF6Z38bfSIXd2OrxNJA12aQM/J4jVFO0Ky3rdOlfw+kzOqxpsLy2aIdHkywjdiSvCD5fqsTwBr+C53t2w==","shasum":"61c764532f923b726fa89c243e4f45e5bb70622e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBCCRA9TVsSAnZWagAAQWMQAKCURJjgwbDZU2ulsxoU\n/MolvTdqC/NLKWQUwcfxaVMdfq/V28bIVahgnovaFvl5sLZHyy29Xfsd5mtZ\n5zCMMO3pAga2pv8uf2WLBLK4NR4Dqln8z70XUOTYVMSwQDVxNQiqTqjCuYHA\nrSHeZXL8NFx7yPkssWjlxaKEl4AcZm9fSUlRmiJrfKCIEve7ovnNu9yMLs8m\nVgGv3RT2EjGtxfj2cyhwxzjFsah4HuhXH1P4HL5modO1JK7e4bRDziUmRs9n\nAxhNGWQKWDfErBIn6ifyipN5ekn1AYoEoCPongnTRV+C1G//VxqnP+gIO04r\nD8BjaannIxHzEPbBpfIqEU3T1+y85rmnBnoHRHhH9I3zNNKDILh8OGxYwZPA\nfd+X0LVOGR/TN4F/KDFXSv7bhZOxAMiF9ijC64PplNPnQLMFU25sDh+bVsiy\nffMVWdJLJvCpYat4ynYtqbT1eukcLVE9BFLRLakyiCRJBSJcfJ4N0sarHK13\n4IqEjLFsZRjkq0x5tLDaLWNLRVAbkzLO7nlsVFo9AOdQFidWK/wfM+RWzfda\n5zcxunrSSMngwmiq9eusOEXlO7CD6Y3FbQY50i5TggdfPGTzqFrTZ1jcvSXr\noALb7lIjv5tVtJ8v/VYBtFikEqXxi0KV5Hl7jFb7JfdF1FGmpDRMrHYVr5E2\ng1Gi\r\n=wL66\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARsHY7JL4c0vwWCNf+8guMQOTNma87d4cyT3U51M4tRAiAGSfKfia2rQsNaJkdpTsLvIwRTDb1IvZWpWi/IuA3Btw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.78bcf058.0_1613090881126_0.42107503855243666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0c6908fd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-V6t2bbXHirsaG/Hbp7UqveC/IG3sgRDuACspIp4BC8lp0h3vte46HdQIg5WimMbYKP8HjTGeHfDDfsUdWvsbvQ==","shasum":"f41b459f8e422bd0e324cf560a817c6b99500017","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjPCRA9TVsSAnZWagAASjAP/RUnrdJfPyCgm41qM8X1\n4naSRhZ8UZj0qeVgvBuuADB7kYakMw0CMF1L0SGPIz9V2VUXafjrkimHijn6\noEcCr43VUNw44QhQn2gE0weYMvTKgL85CgR20uumJqNOYB2hOF6m5ACuqrDe\npjm/lX2eobTmI4X2fF7X9CboJxtI1WTkW31b6NpNXc/pgaYsdjtbA4ZIvjc0\nHpk9hR2DJ3uuJfoUzufmbN6TlbE2CYP3IpJuWMeXyvBNXTLd6dubloDieHDq\n8njdUg3N55bXBEUeLph3QH3KrrzxNVwN1ykcDUEuzqZK3iRq82leYfDOEI/y\nsvKxyDwynoFUJnuk8DZpDrG1OyqFRqzbT36jpxPdHnoBmxCm0qqk5UO0lUSY\nqdd89kT/5TLEXQPqJwudf1m+GJquZ/lYrrRQtUQ18okh9LFggKotwvVs7frF\nOo2GZOQbhVOlEnra8mEy1lsOvXpC6VkuuUPw5ybwBRDJFKKFrIw9Ev7JWene\nGj/oAjgrww0BfF259pBpb1rLFlspvlJ4TsFzLEc5cotuU4oWfdEqAkA6c/JA\n7OqBxDFPxt3N77MYyDJO8MV5etGjHE6Zq8UsL0sJQEfIZR/XYLTXdJzJUeil\neiJgHb4/95QWN0fND29N558atqyVXYci06JyygdbJFN/jxRrhDCfn6x9JDBz\nFSyz\r\n=aHop\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMzWZEE+FQUFEFJAIXW3wdXYQtI+SGVonY0WhM7iIz+AiBsJubQItdYlS/Zwm5vir6HyTNUYXzOUGu2vfV6jMg5cg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0c6908fd.0_1613093070639_0.09516136277655773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-oemOr1CgmGcBgafVSIoIHTf4xz2nafR+tLi4yq7ZRiW1ClGvE+KOvm4X7VpuPdQqHLJzEie96kJ+3R3HYXczzg==","shasum":"116def856dc00510d80b00616f48270751824deb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJoCRA9TVsSAnZWagAAqPcP/0j5ZkO8lU24cTHRqheY\n1tiEcdA0hNgZXSs/kML2EYF0rlicmWiGl+K/3gkBemnBG/tYE9Xm632jHW9y\nuqwlBVBytc+MvTyNpgya5Wh726MbI8LnlS8KWZAxsIBAiRRXXWbKrKwyeTdN\nT3XILVBoMwRduQv+yQpid2wQrpihutMo0g5u5e03UsXyWEViDggZFnc5g9xu\n7p9qwGwjFKE3EDJRka1B0fqat69oPmXta1W6+0RRwgOy+CPfrun8ZkF2GtRM\nClMBVN5yyzRI5thGm3SLcsbsUAplMyQI9w7t5eNmzjwIU9eoZo5CnwUHaVCY\nHFE+cgxNlvcA2LaUpzeR8Ve469amjLOo4FH5QnMJFybqc+8T9gf/mLa4+Sjv\nbW7INvto4iEQepad0Zfx8H1vBn2/lWimv0hPluuLynY+CdwuL287br6jnBUJ\nH1To4bBx57esbqXtKc/1c9lWPLuRCItZtvZqqrdA9ppbOriCEeOEcE01tikg\nHeoiBjtpV2z3g4cPwB5Ns0w9c43qcjMQOJP43bHNmswAzfSKyhto249HM05K\nMuSZVnUTtQdBQVpRvFdMhq+Y89z2XzQ7S4y2Ng3TfrWc1DJxpILsk+AlqeXY\nJj/qbJaWo5rS/XhylhujqZFqIjBk3aNalJO4xMnnrSiA26dfySo82YUi40Zv\njLqV\r\n=zonA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+grjEa+c95lx5KhaTPzZKMooYB9BtwTPtzJ1RrnXftAIgYEaf7OO69j5jAGc1Tqu7MrDzVgp0ScEPOZreGx45OCE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.f1f34ee0.0_1613161064050_0.8358117458942689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.d84df029.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-5aup6EKjuL33PdgF680dg3VoPWmRzOGZDSHAwC+dOUjUwdE+XHqY6kDm4xegSIIyO1VA/rexdC23TPoXovAdzw==","shasum":"f7fa3d92bea81e52d0a00e62ff6eda3973c78092","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBfyCRA9TVsSAnZWagAA5SQP/iGexMoCHbun/XttJU13\nwvAjIfgW6P2gEf8gIrIPEaepQyW0Ngg37Ubs4hPo9D4/OVzArhKoVL5FQXMt\n1LOP7fL/ySz3SbxtLlDWShkRZ6nVQW5njR+nZscupXbMxijEJC8DTWJb9NPl\ng15qkucmqq/x1abmvFpCPb8LI6bEj88RR3NzGeExeBYVeShUQmqYXntb8Sfc\n4lVS9cyhjWe/eFzl4gUT6HsmMefPXANEd01SHpXp+YdiEgKyxg1WGJSc7Enn\nPC71ALS94gDPafABBY4NCMHxMYWLxyLKEgqTB3a4b2S5E486/0WfwHpFRyN2\nDI21HAf9uCNuwRwYj3x8GALQOkNAB6Bk60AlieGkNBb6JpHyV9vIja2DBw9d\ns7Sn66UxymyAOTLWTcoe8+bheTAWS2BNqg2G9lLPBqzuym/m6a3wImXpKaGc\nbQ/2GelME1uQazyVEy7CBUsMryLsJ04JIM2lEF3lJMq8P+mYCZtdhSKUOZgx\nqPsQpgcAvVi0SzTC+61KqTUv82XAvxIKFVDBGdxMrrXto256VANXqfdtgWdr\nGzLs2EfpHIdxg0IGjs+otNwqLVukc108yKshgq9blKv+6PJxQpTatxa4nPvc\nRTeJdy3+YLtXCqVbNw5y//8TtA/QO2eie+E3nBgXKBjThFTZ0hkvreglqTY+\nethM\r\n=323U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/EQt4UQ5Vm2e1LBf/e5J/vlIcP+2r/ossr4y8KESrigIhAKtweMgKqXfpbPNYSMs1jewDLowj3tj3lSpudEe58YYo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.d84df029.0_1613502449923_0.37006999058643686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c525f471.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-oWlmWwcpxTxaK+d/EfoA0SXF7Rk0jGazv896ZluG6D8mb5F2cONF877zKBZFcY7mt4QbtgRX28xR/guKbhfaFA==","shasum":"41a1275a0ac7dbfc97004732933920449553b1e7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYI0CRA9TVsSAnZWagAA96oQAIxA23DzoHSC27zTL+PI\n7pdHTc11pnqrom6vFsHRDwUPbpZdbocPd/xXV3FOW5Wtiurbex2vY8zSlSJa\nGfj2X+HZQWIuJuK0Et0acfdi5k8ctCQ6UuSkmZWqOsKhAJbpsqUN8D3RIbjG\nXtc3mi8948lgjvf33CzVBwR6mtWexxX6wtaRxRf3d1mG0HYwVSX0bucUcxvS\nmKGoma+Cs2j+F/1k39epneKn/55yPqfxSEctDLCy2rH9i/wdvxT3RAIyr+GC\negt6SFePJwizYEEdXifPTf/UzuS+2FGpuhpFM+9ApBuZwR6geAlIcCEdChvj\nBPwamtgjJJAUJlBM6Tobo26qypIK2VftGhlgQLTNZtMZM4kcEARQLDgdOiuS\nEYKBdTdkknFLSqOuE2/dX1V+LQS3cKenkRBf2VUa6o23kKUzgchJJLyXeIRW\nJrbosBv+cXXsciuCudk0MedUWlfAB8NWoUFHLRod/2Oz+F5yEd8qbCY9UXzt\nWcL1Bic4H+DbQUrRVFXwwF+wj8VIcWPN6Ic/y7ZdHFO9iU1FeQCBEGDhKxwo\nL/+vC6kk/YHhWteDkFq91du9pv3T/XbrI7ts4nj+42cg2eChqSMUF9IM4fIp\nZpT8ALOQia/p1sb8X25MgzmWlvXLyNPda5AqgSFARrAxeiABRPXTAv9lGVbE\nirL4\r\n=qzD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLoQMeJx1kP5korThTfJr08sl4+e/EdelCOmtLR7iePAiEAytFNFzWbMl8CAFrYiygumqWJsN8bFeTxO4UVxKYUe0Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c525f471.0_1613595188349_0.1951697933725336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-A4EqwrIq8YhrFaSbyjOXORng4CxM9UlevXKELZ3GFwrDFisHKTBXmyPJmm7lf8/cCvrDGCNybFomALoTxNE+Ww==","shasum":"10ef91dac71927be62438c3153dd11a93537189a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwKwCRA9TVsSAnZWagAASwoP/0AcT+cGZi2WOT+By2+n\nvL5B9gsJds/wFipF9ioZx6lihaze3w0R6ZNXFqF7QFnVXLOL5MrQS+YaJxht\nmEk4MczTM11UCH93n0xfKltvf0uRlkTC5r+XPnA6Q/QOwYB8AFW+FMGKkr3I\nldp57O/w1J4B1zLzBACcyUZ4FGs7n/TO2bLB2WI32fgm/gvvXw6ULcnWkhNT\nlBYqZm7SuC2TmIX2JQTnv5oV8/MxHA8i8rPUP2eX8aZrN4sDsj/WtRPrOXYu\nIxMOjsNbhuLymQaYEfPJto58RqSx76v2inymwCPg9e2XeYNiyl4NLnSBjSxo\nQpm7hUPcG47gRK1HdhstRYnPFZQIWjl1KNxSrOMvdDV+Yp+2BNWSM0C9D2Xv\nVHAPTy7DKRlc/4HrLC8ZwMlGkKYrMwQHfwrsKhUrMjpk16NidD99vIh6+KXz\nbC9amDRfEgC+xwwluHBg58t/uGJNzsBsnFSHPK5BglkAVz/2nW5WFp+NDkQw\nBQ5glTedhVpTQ8nvJT7DAyIwSQLFRmpgoYfvHZ5sya3wSImtYnY5hFPciYUw\nU6r/gtOp1Iicc9M4iIL0TxD88h71cvrUpWSQprDywoyiPLlX6bGUUznYH0I0\n+vXhD93SabgI04Rms93G9JweQoMukiXAGncmq+YUwktJEfukwQachJ+Nz8pq\nZDT7\r\n=FfW/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcw0Ex0LOrnGVX5v0Q2CZXiyRCPG+XHDeaw6btLrOSBwIhAIwIJ6tQLRJUhN3XyzJymACEZaH4ftws/HJjvNQy/pVw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.ba7a1b35.0_1613693615527_0.3434599638335576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.9a566dda.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-vS2y6s64QPkDxyLmAxAaSMsR7ziwJ3GIZONpw9/SndbNxXjPH+3T5ORR75HB/18n7WerasrVQdEP/OxbGdwiIg==","shasum":"c5185fd633dbbf22cb6a68e403d1b3c0c25fda7a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVyCRA9TVsSAnZWagAAr+EP/R5gxxGQcHHlFdQKIEHW\n0KipO6ozdgvZXkxXRv7pFLhNC6Aqtal0tSB/hOcAnTV0dthsmeXxsyqjpkTn\nbtVHQ989q5WhqdFc+tvEsG8or+VnjkFx3HflAO7ingusBqYWn97hUH3VSIRy\n63dtxlzXS7N/raMS87TQxWkvioxS1IKKBwOMymWRQ7VkX71CSqcKlouk87Wv\nmYNUuKgVZ8guwtdouNU/xVVmZCMwf5limwbLfJauoEiRYxvteP4voOFoA14w\nRG4Ocw2fXM0vUWNc/xKmQmZHhdswRmWJfW22rkOeinTHIyrs/6k3tLJK72hv\n/yRWpyoS3RGgUFSWBoUhl91n+q1PhNeyvqSTWo752Oo6cFpLOJOGqLqM3H7n\niLDnqj98V6QTzinf3v6Nse1abNFeAOeYcoe1FFEP6Pb0dx81kHmovzK6kdRm\nUAIsqAkLk+np6tyw96JYeXmrdKQFZfpK55ebq7ji+aCMcjLvmMmbY5nMlmVt\nFd5dccWVvvcQMROu2dGv+4LfWFE540+P7H3a54KsIFFOGKXCxRFmRw85c5Ul\npy/+olUYWl67oSAJ7uqLhdAs3lRk/DRD7Cao29qwo07buNMO/Mz9j4rdUarB\nOYgreUHCcmu9bJakRFLWAMfm9bdV+5keAXsCEhPR2rtSstjObE1COx60acN4\nfe9R\r\n=St3p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1k9GyK6t8qZxprTZnAPQY4ERTfkHX82bkCIRfUTac3gIgWhTmRp9JLGv3lrdgQQBItvbyNQuvSTWieM7JEi3+4Ak="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.9a566dda.0_1613759858515_0.43534922856881964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.55addb8c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-SZq1KGZDIl8OvVASa1zlBLCTbvPh4t3SvXZADXvx1vS+Dlie3a6+/tkdLXmvmyAfIvEhGOHgxd6fwy1UT8Z+XQ==","shasum":"6b0720b0dd3c1ec34f47560efdf1464f0135990b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVWCRA9TVsSAnZWagAAV4sP/0JQ3e9wSsrhXVRF8KDY\noyDvNKsI6VfrXWUcxcnWwmdZILGes2k1DvulL8+ZfjxT/UD1KrzHJFO24ZO7\np3K3wiqdvVB5AxtwF1RsycdB/sm5DdKitvoO8dx/s4i5CQ6h+g3tK49aiprv\nCz5gNX0mN9G0XDqN3okr43RaVE6O21mCxg14OmytwxRwdf+DPRxacSdoQWSP\nShC2bMFuq/9SFEoIImyNAUPeMfBw6GfwsyBG7uGwJ7eJk+HqfJ95BuKII+qo\n/pG6/9dWwiz2nRdqDDgvKkvi3fVGMK8WOe9qhMzFQCpTJ1wr6WdoYLBfb1bv\n3DVUBJVCYgC6DvRbNzr0oGoQlNWGPng9BMuFKWkioYaTbDPKVaoY+0pQDYLv\n6BolxRNLlIJXeqZ8RUIDFS377aLjNcXQHrrWL2RRMU/dTMv9G9NdnhbkahYm\niMyCBnUFxwrY8W0C2YAVu+vOefif6vuLN5KIY7tm3sAiiscD9nLOEHmXlcmb\nuZ7u8iDhycNW+Prlikj+/xgNGZ75/JGgou+PrhBVlMZZngAZEGvVFafVqz7Q\ny9HoDW0Zm8jILQK59C3e7Z+7Zk+7HA63eXCWX0dGHl+/GqCXqLDGGIi1Vutv\nvZ1c0ygUdER6b8zvg+AQcw0Aip0LzXxDnU/dI12AaAzn0IVDdjwj+W5HVW1T\nQvvc\r\n=GCZ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5Qp0O9yzxL2piant7yxA94OWlxZy+59qgPLCmFOjXLgIgFntFgqOAj51k/FAKw2pfRgC21TLLTI8nJO9pWt6w5dQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.55addb8c.0_1613772117671_0.5011245994538112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zAUSEtqxa+meiJqaNUpC8MGfijU6RU/tP3yNJJPCGy3/0pfHFWlRxXAs6XH5c7LzHXoBvJpTd6eInTpYoKgUfQ==","shasum":"31a0c298c1f84c8ffb66b5ec46d3c210872f6609","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYQCRA9TVsSAnZWagAAqq4P/3/v9NA7dXee21GaZJ9G\nj+N2UzNlJKPrsW1rP3c82ysAj+pQFSTAoDqZW0HBg6YGnD74ULfz+WfasJ9b\nBLUaevRzaXn+lh/ljLue4CvBZO+wM+mwjht5F87LloR2vvPe6H7dxZzmeLJW\nwGndg8ljxhqk4L9fWwCDXHYgK5gVLdZLGP4j0Z6FUAApwuWF+MHUJ/bzBywC\nH1Y3tb7flM1x6cwJ/c5Vzs2GRB6dcedqnGmvH/7qLvEfCH4k4PiaE+xnT97y\n8fbESH0Df6vIBKCkC/qLTKSrWRmYKLrSrUr7+Sh3DfRpVhLUn94msWgYmKDb\ni/U7EG4E765rxQH6KxHuWlEuZu5oD+oQHU4DZxe5P2JmjsAtto0y3XTnZENw\nCiRWvgLNxYcaF0JTYcyr431B+ZT41OStYALNbUPjPsMnZuIJEJ+XAL2bGRNS\n964dJc2jvnzceqcoNkQAy9F60CmP8sgHwU6uFsNhmlbrHE8qg/p5f+Xjoy+A\nCo+5mgzIVkiqSUcJMa4d7+24MpDJtGJBgs3hVxzFkZb+gKFTmcfzowm8mYxD\nCyHSkanuv6fu81kPe2wrI+YInpTTNpSa2hXOd9VG7vhK/vt7eNo0HpAoPw8H\nVe5WA0WyKIK6/VlTYyAqhkStumuf9e8HaJiY5qFkBkVwKfpRvposyEH99DPt\nU3Xn\r\n=eeNQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfN9ZUNZ54xjhiyKG4wDUNh3Q/K9/Z//fa+c2jIXMjlAiEAu0LVwBAnKCr+SMbGBOkVU0zD1Ks5RtgoMM2NUjwVPTQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.85dd5e9b.0_1614046736281_0.5676411170501527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.aa3e078e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-LSN3kpRzMsRR7K+lVjtIPmVjNWq0nmaEUeKs0mwOvsgfTFpvslptE3Lg+phY3J1MSaH43u1oQ6f/BkwtUg8QIQ==","shasum":"eb626870dafe555d7fd1e30a8b7972e74130afa1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTf9CRA9TVsSAnZWagAAPp0P/0ZuaoO3rM0f3X9IVDek\nvzyapO4U+6Ypq5Z8ECDBxdCM9FVFcDlQ+eUFuyoEtvUhnlkZ91TDlAhXtoP6\nGHFgoHl3XVCRMkiMZ1nO6bhzOsZahPzMCw5Uo6hoq+jaIC2VH4j1rvIVALAK\nNqkqPyg5SKJRpK5/gIgvd4aXcabQzAa2sEAoeVvbYW9IEzrkt7V2jIbHqugl\nxRv58qTd63s6llig13nO8TRwHN86KL9okJvza2/WfQhr2dBnmJJzLa1EK/z3\nASzLiR5Ldb9KDFjowTKQJDbB8X7f0TvCvpVvTkJArwk5TrzqqU8nAjC9BXFG\n08SZI5txflSA1xwciBd2AXaOJuLewTvSDV3jUHrlYLN5297jgioiXGNB7DVC\nhOQBv+RBWZW8k1898T9066sUmNJDN5OnvC2S5g2gdrMCCPdUflRCu0k1sOdT\nPwBbR1bXtf4SWTT46bBBiZejzd57fax982gcJ+YIi5OOQ0q9KGB4Wno0t/ED\neha/04C4l9p+OShFnQjVwg3L3DkjccblnMuxVCrYQV5hQ6sQVYUJxoX1Sidi\navVrUMjiK9VdV5eJFFPBgIuZuLT+RYcrYJd0AFhpLnOu3bV+3sVaF4uRiilF\nezQMEUG0ovbmAytFwqo2t1ceQ/RY3KPelIsRT1blAerEVuGPLitYIhRSvihF\n8mZm\r\n=BC32\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDedm/PciBWYBOBDnMihc0KFHPgNQlOrpSevSpovTmpqwIhALvXNM92640lVss84W7OC4ZN3kfiHBQFjC7yZ905kDDy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.aa3e078e.0_1614100477299_0.4419767114565283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.dccd254e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WFd7cQWOWLs2u+MEezuixC0sTkZdCKiYf7mUGO8jhS4Gc3sRe+5gBcMRja5ac/eVhGXngtMi+t3m9eS/HYv8dw==","shasum":"9857285ce08b888284a3f5756138029f5376ec25","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOjCRA9TVsSAnZWagAAtG4P/29hCrYEYokfel5tOSqy\nb0dc4mywFUR/IGxwfIAMyofscNkTQFdJyxMsonCTd0auXYmN+htFQHVs3IvI\nF74eym9eLfmOA10Tm9aB2sZUo6V1Yie+xQMLmMbBB+Csyx8VVMqiw8BjBOE7\nDyKk5vqm3hWfaH7jEcvoJOvsKbJQ1G9hAv/JORIPB1S9UUvLPl0+bWrOnail\nWsDVlgrNggsbi1Y9FGqfapIofhAaDCNEHdZYEcGFcj+jwZbJ0hR2XedpjPFF\nik6noxHtGClCf3cGT0wYlrp4haQ9ALAv9zEyr47h3U31luuD5+FeDL2vZaVo\nKv5hdORDDrGDKqPzlCeShA0p31Ly2wmAlYFE/1SYYEser95x5A3C3+eVQxQf\n/BVhO5HHIRb+5jvSIia4Fmq3Qpzyu2inW3GxYDQcgpb6BtAMlnHFz2wiA7dh\ny+6WZkoS1z8dd1QBuSG0kmXOPMbPfSxgBtVagpo+ZbE75Y6vsraTVeBEg3qd\n/jq5OwJYow/3muZId15BO/FaNaqvuOdTQIc+nofF8UCoNuTDBkezRU3Tl/kQ\nLGkYf2vMK45Ex/yHKUIJUSGU2XFSBFvvOjvpS//+/tA7jDPov32/nSUTfBhJ\ndjG6UXM6KZWF9dLnAzpJQTAq7tj4/pVcJ4FUNb/woopl11nalOpmzrQaG2qq\ny3Ji\r\n=lzBB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDag5RRvqOWEjBO5++lVumV9yp3+xMLjHTvOKj/w+VOnAIgGjibOvv9yLT5SkrCIXIm2EwqohAwinjFeBZOWjbHL7o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.dccd254e.0_1614373795219_0.4276238575024267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-MSZXVmyiT4qeBCl8CDrn79cc3IZaLtk5u9kACOfzpamcU2bDEhVM7TvJIaJdN5gQkskAox5tdrW71MK1JyYAzA==","shasum":"9a0e117f037211822957e048063994a426040914","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":66416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQSCRA9TVsSAnZWagAA3EIP/1rm214mrXAJfWnl0q6Q\ndfi7/pyydApLBcpucQxvIOZJ9I11kxPxu+7/TE8yEgdnmorGgrXzs9cyKC3p\nDL+1B9OkimUR4lO7UnSYGGajcdQYlhs9WjAl8rtOpqPA4hQrFvOE1Y4kwo8X\n1zRE2WmFnCnDeTHOzEeWevnJ2aHd1rMdxMZyJuyhQzoEhjrx2a96QOfBTvxj\n6pipEwXfI4J+T+PBa74McAhBnxfYZBTE9ERGiKau44hu6ZkuZ/aYjN51wl8W\nPlk2KtbtWz+OrcGdjXWLXgZjbAOE3XCFOqr/R4aLRzyQcwU/wV/2dg81irsq\nTAwdPbMYjBVQ6w+XfSQd1q3q/Jm/5jvI9CUYvavKQkuBFkzcf7mZN9nRbm/P\nvc+K9nz128Wuo/J6qJK5aTIWNWhGPV9TlBfiiPd4MEOjUbdFFFRlI6aAttRC\nivBXt5E+R76Hq3+XyJtFukl7noh37Q09Zgs/gniXwJ86qOa4YcTjWXu758ko\nP5QXZ7a66GgQn9CJg0tHFs50pLnAH0NGWjSOu3GP9qKkdc8YluEGtS7LX9Rb\nVX696oVe7Qw3DITfd+mCRGAR5LaZoQlTDwuRrA0wwp6I7pgj0sf9I9fLq/uu\nQrjG9g4A3prE4CzWRKwBDEzHPnZxxwHUbYsVvVlP+6HD0BH6z64W4itQ//cn\nRnHo\r\n=PPAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeFOr+VcZhrE9+7vyrv2FrK2OX9xKTeonY9rEqEnCWCAIgD43rAd/EU74oTzd0HYPE0fmdw9XLD+8IzdOCaLTCw6s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.7dd1a27d.0_1614636049845_0.1708145548067177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.12574572.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-g4Gq+WciooRhq41VzbVeQr79+hs8eTGhLKMDZEhVdlHEDvJEl0y1osCvwcCshN3/zojH3zgvROG3jLaNnz31ZQ==","shasum":"7537c74e88c389173017bb86044e225af3b15493","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAUCRA9TVsSAnZWagAA+8AP/3Hy1riHuI4mtL+lIfZq\nG0lc/pgqkN6TfAGR029naWu21CLk6ETlEaI/C4i/zGeiG51L7kw/iUm0tOfC\nK047njbM1Rwe4pnQnp6acEGbvwLMT6RZdNwYTvo6CRT9fstT02FDCCkKP15P\nQSM+F/Zg9JUF6npxdmpqlYki/8heEf3Z/2Je2Z9slAgnYrWN+/3dTUn+0ESp\nnt9XCMngHdRn9kqHd/0rTNUcHEolVsAfE5QkEwWw+hC2S3zCNP6ZR2f9Ze++\nAQSoLM6OCuEbxh2U20TW5uCaANPsgacIWUn+Z28AZieZpL8GWzij/7mFeW8X\nwsOPDR0NLAyoG88tPA9w5WwzmpgJzZsJ8YkkwGKzietqDpJMChCdNqU/9vw/\nC3EESmq483Bp+mYPO/H+5GUdH+UMQjPPntxvYgmPA7yPK++KFel3ICb0p8W9\nAXMtD2r+wuD9FJFxQNnA+RHR4dZqOpfsU1jNVOMeAoQTDvSpdvVUybYRjN+o\nClD7yHn6gqfJe7mylsKT53IdlK5tO9F1haTd/sQxtLWEtFJc4vGrhVl10GUs\nblSFic+BrOxaEqV53gaMTZZajj71inOO6pqwxlbyuaKnuGABSrLtX1moiTBW\nxvptl+P7akh4ejp2WrTabyNZHR99wnYpBMH/Yw0hNjk4Yl1C5nletHVcdkOy\nh26p\r\n=FcCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2Svayg4YAM75ZF9uMR7/glxwLZIRSnHIKIdcidxA9cAiBMUy1905BorvUE1E2eL3GUJI/fHcU3WT66ThFUHoZXjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.12574572.0_1614716947515_0.7342632503858568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.1109a3d3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-HuDWPn659ZcJANCNGSRTNfRajYmdrhYBsC02EJJG8nIp7Ymyg0N6h2VTaqB8PfeKMSoa5Plp+Jk/dLT2OcsOYA==","shasum":"be08a21f314f4499ca355668d3d5f2d7632c4e9d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqE6CRA9TVsSAnZWagAAF3IP/AzoxFDbf5Dq6JGwaR2w\nBDhicXJxoF3J70AG6dd7rXm/JFrs92zH/g8R1ScFR6x9meRRo6Dq+ZD/ZIHQ\nmWg1mljUUE09JuD5GVsyczZ6YpTTYJNQULtz/4c0aRZ28UHfCabUEtJ6QK5W\nYYoTcMI7l4d3mYCTADCFRaqioyZYU9Bf/PrPN58nV7yBJa9ne+vmTp5iZdHT\npEMrT51e0KS4DxA1oAuFZcnOQuO1GMtIzf/JYVMn5irl/vj8jnKW9x0ipdTP\n9xKI/5G1ql7UgtaZdBtszlzUqX5fINJtWpUMZzc2o3Eq6Mn/Cr5UUBujcypR\nzW6FTJNDnjfgqh1YDDG/HlnEDVWE3GdhN4VaPLl4aHai5zaAvjzkVBr7Xugx\nItURUByRmPhOFFk61sKK5HqNmVUtnIY0ea6rjbiEjDeD0N93PMbwGQlAwXWt\nXsTeKvejmKXZZvMvzmLQZPKMM12o7bxW5JiHDUgYsFrHqt4j74D8wq0xs9Bs\nGEC6E1/mfIH+aHT/ASImv60uW/kwv6hTYkE67NscQZdMOqQ8sKwUCfwelIar\n6lj6zwhY6iFypneY9YrcKsxgWn1zPMXm3jsrf9VdiUcj26CmzMDzXEDgj+cC\nbkGBwM99Gr1ZuCBvY/oP4YwBJS9GOzYpBQ9VuV7SGVoZTm4jcetHpkU9OPDg\nG0AI\r\n=FA91\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+D1fUhCqrz7mr+9qw4q8GVGv1ru7yDn4odps+kzvVJwIhAJ5oNCC/I3FkkV1oZi2f4Ew/rx4WntbgeK8ebVb32kkH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.1109a3d3.0_1614717242308_0.1547374485390287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b9cd8739.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-sZz8hjTR37NYYDNiZX9RajM3bzMlNFnPLMduret9yLNplFooZ0MfcPKiKsjloTsB90Nqda1JCJz7AyChKggJFA==","shasum":"76a0a6041b32046f7ca35171407fcdeff5141e09","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8t+CRA9TVsSAnZWagAARqUQAIyq+ExGveMDxKK3rWEy\nEbPQR5YFf1ivdGnqAhxqrjFkbo9zqaA4syp1uD/sFYGz3Hs4n9jMGex3bJHu\nX21NTleai4YAvj2NUGZn767TwOdviK1ygnMIzetZ6ufzDkavm6iqX3Dt0vGN\nSAkcSFyUX1bEZAxumQrwzcW2HugP3ANKJ14nx353joBXiA6W7m4TUjbYZtqQ\nxf4Q3qhkJqrPQtl1zIyKpjnpr0hZRz1Hs1YO9/XXqKpOvJ96Dj8Jlf99FA+C\n5f6RHibwpQq8X0BXK3ObQUySNZNed6xOpmCMg9hsg0krZYXc0mb1GfdIoKSl\n4v6tN3hFX5cnYBT64xHj3fyo8pGuo079RaG/MEP0k5DTlkvlCnl/evm4A5B3\nsXXkQJ6nYFFJUFdD8NkEx6I2Y4PPBuBC4KDn+ay6LBH/MQHs/TMEx3dthN5L\nW506G1ASw+etjeJbzWravakm4JJV0sp5887xqXkgslhvbN6RWG8QXH7dl3i2\nntHsrNwZtEc+aOnXEe4aaCbpMXAalMPw9VRsogJzEhv6An1Wxm42+ZCXI8+F\nWuWmnSmWjcBs1Q85wAJn9OsGEOFIsoqffYar1kXv8CZpNeeKSCh0XBQozpGx\nfk0oqoSRIIlCCJPR7zLGTevxZh2sg0vToLDjtxRWBNQhAFXMfy90NI20Qn6B\nJ2dp\r\n=6xq+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbJhgxjFx+ATWhNI8rcZQ2pwBTYMVSuj4A83xmFhvQLAiBYvokRWwWNN4z1Kj3ekCBF7HIGM35spKnUIRuo7oGv9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b9cd8739.0_1614793597739_0.7213347839719364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.71ee796a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-jFeW+/JsmrqUHXCZ7Dt4VnyWBJhNpL8o/FD6KmNIsLjPPlavpzck5+l71sWNXar8M7FfWg583EQ4tM9HhuTHnA==","shasum":"daa7b50b63b9c853cf3a6692627cfb18ca9097af","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+08CRA9TVsSAnZWagAACKEP/RbNPpMLEUGwP7hbtCvE\nwANZV6Q9+5aQ1mHYx4VYVYQOA9R22sN81iTEuY9B7+vzjwd1FhZLjbcygagG\nR8P01/pDJS3drFP79C5dbii7cMJEmHJaocf1Z8iza1ba9/Hm0ai0JWdo+TQg\nZDWFVE/2vzrc3neoOXnjvVMH67K3soiCLBEjdTvpahrercoAtqG6eoHoRxxK\nfiei4+1VZyp6qPgWnjavOh7mVB5U00ra08pn5htCqcREn31T9uuJBYsqEnVQ\n8ZwvUYrZMpgEBDtqPzCoCrtwgD44khenG8X1mj0l8A3pLBsW3O9igd9vrLXw\nvdJ0gCwGeQ86fjLT8tcXZsJeE7ysnAO1Ikyr4YyRfVDtL6MUIYbpZp2JPwFW\nWQtcRsVirGpdWo/8+HI7Yg7SixEw4H4NJ9aZhOipdhirbWNZ3qTZfpsJaVxt\n7I9DnCh82AhIAPEuGTzVxWYATOBBzT8TzJpYsJ2W2b7+7f8rKLZMMk/gsXSW\n9r3W9weGT+ozwywB3JdDuU13cmZCxIgooknvPIrN9eXHRv9p0L659Ad1WnS2\nFnDG4Voz1kgmYqHGoRjLMP9DZmdx2NVnmteHO9MxIw2TPQNh7PqTXL0PvMbh\n86O8xYErPX70a+EBwpaTdinsu4zlbPQRfIPFh9hmNXpgKqExkbyPFT3MqznL\nehan\r\n=vvwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYOfitjY6VP3Ipag5fXd9TGcJcwIgJViLwVvwHFoYy+QIhANkAvvtt2ZN6lV/3gcyjIata0n5s36NSbAhIwcaB15GC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.71ee796a.0_1614802236522_0.6341614964659974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2be191ed.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-bjATrfDn5rH+NOGeXBcOIMh8WxKXlEgJmRj+/77VIFW9BfWXp2sth7eKGfFWtWA3/eLESL0y6mI1EkL4XwS83g==","shasum":"e5b4ffe0c7432efcb69194dcbfffc621f86c27c2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATJCRA9TVsSAnZWagAA9qYP/2UQP2wWYWCIsXhgDlyr\njoAg0ZoQ/1ejzvNe6NOi3xpy7jnMEHzueUPFFMW8oeg12huUfvWeCf2tn7r2\neI7mmBbANL5ifF7Klf7Ebm4MPmTlOILVIZjDgIQ/KJ0/CjFXUda9LBUCza4i\nEV8C1v0pyzg1PyMRWM6kCNEuyyGe0UjVOSYDCh2yJtmdwOVATV8zifefi1IC\nIgGl+uHuqcONzsN8l6m6D6KIn8X3owgRV4y0MOVrD3HEEEh/CFMlVxENWWnR\nQG73IRZwCmkytP6AfLLc1N700b/X1kIhWlW12/eCazXhGK0qRY2SvgPokoJr\nQaNbuT6Sm5lbfFF3RHBCR/UTk1lgbk9/t11J5ZlkioEQYU+14WKa54/oH20D\noNhwPmA0UNa3hN5WUQA4yz0kcuzrYpfcTn+89GEJE2WAAfG9KbTPIuIbX/vg\nPkztSh4e5zEgBP4Tmcf4OQSliN5W3/Ut0d8+l5qV1F3jjzF7Fms73+qbYyRi\nD11uCiO7/KFWjh2DrHpbCNnwJOXj6/xRHN2pdZ0OHW87s3rbguD8qOhhxBIL\nfq4Wh77l2areKrYx/BA7QqzjzpPYvVi+7Fb6V9219OHbJjkVjGpef3CWZE+u\n2w9C+TFlNZPclc+yQK2kRnUGmLgwgNuR+2RVS9Ydv5/iVBaxZ2GODCGe3YD3\nKd8p\r\n=tOCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdxbuEB0M1qC+cByYdGEZqPqjr+W77JL5ncwWvPabX2gIhAM0j75rk9xpWzYEnBZT71N4DAWmZRcaif1k/DNt71x2b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2be191ed.0_1614808265246_0.6294274103569273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mk/x0BqugC3MkTVLWjOEdIYSaVNili5WS4G+dj3vD0Z/FhoCLpkLSsMYYtnU+5uFaZ+hgwHV8gp1EPCMswoB5A==","shasum":"f0f0c5b413b23c46dfd4f08c6b1607fda12c2f6e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmgCRA9TVsSAnZWagAA2BsP/3I3bjOAXWEiJwBOqZov\nVrv2w7pNiMeurzynSS+slSCUTKW/BGBA4WyY/WJBRSEihK0M6MHYRH3QsjA6\nrLMDAN4HwMdBm4SriEetwvwoJnwrLz0cQ8uRIxSMOpb0qnx0a0CuRuqtvJCv\nPjLHhebxawFWM4CMW9HDNIWq+zjLN2cacJdRgGjqh1xGKIR8lzYSaBBmf3M0\nrr5z8v/YYIL65UXLKqfMu6EEh1ibJjZbkdD1V0Bss4bj4f6lFkTxE7bbokDx\nfDCu7tzFZe2FgYSaxYOPdySSVxRA4XTU55zA4iiN968I0rSwASUgA5wmpdQP\nVmXhxEkprT4JLhlzEioVPvqByAnjzubMCEyfL/rPL/BvOP4/0wfsM5Twnhqh\nhi8SWvDg/0bSO3cBN1w27lYTWlq5erZZ3/T6BA1o6D0q9dlnPi3dc4HSsu4O\nSbxPxrEQlHgZ2V2G3U3QY6C8s8aO9Sjr92Dhx0bGkj9+QR+irxSp0Or3U2hR\nr21tXpaqw5Rd7/Ud55PejArYU2vehlROvmMi+fTIKYYiuvsRUwh8quUHP88/\nby4Z0qRl9FECL8b54E7XaIrdDbnD5qQryxgsoqdYOWnTmsgj1/R2QRD3q9pc\nJo4BtGGwJ3RdLVBUfOYJCL6GIt3Q00dJiItfNa+OBWm83+IEl5M0xmfh5aXr\n+ZnA\r\n=44ej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD21u9UHsB2Yt6GT+YELdNa7NmfaEBJjxVNOY6uppTETQIhAPfqAijPKVHXs26uOkXc/xbI0LP8gMasI4n6lFTzYgmJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.6dc7b06f.0_1614903711944_0.9782105371292118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lBDlpSmaCmg+xyBMR+1u4pM4ZF4uRAAL5J0EbZssUKAKN4KloFPAiYhyXccLHcoggOXxsTdbCneuyNDp8GWtVg==","shasum":"f1118db49b0dbf2383d20e88ddac9420c3c734d8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnZCRA9TVsSAnZWagAAAlkP/2STqmBlEoVO4ddCiCwG\ngy+j41DF4uJHVV5YGa2YtgDOX2h9ejvXNTfbixwwIUrO6LlZxJgYlVpxdt1H\nKMbHbZQSwILUqPbuh2D5vIy67wS4n1BOr+4azaPTyzxI4cHiCapTOhYQlEVv\nEly8yNPmNbtsewFkIJQmgIJN5YcexeL/rt8j3ZwKp6hx2MbLQ0TA3IOx6vlF\nYsjGeQG3/46IuHI7SgbB1kUsnDYZjFd4T5J+8fc/C1fkzmcoGRYZPjy4dwYU\nVIHAGvkzPQsMxcW/rbZ95w52s8ElNRZpkeN31exHZOsygKZkpxS0yw2pAgZV\nKf/jDSyBIw+y7e3Bwe0aaTsgz97Bn7HYH6eOkfsb01Fp4ZPN/guyYcoqu+8O\n4SxguexED28oa8KM/rp6sFNIAYvbeIASUFsM4VmUmRpyUrX24yPJJdcE7LAC\nOLPGcV80JRL3MwlglrzzFnuCwDs9AhLeeXPHw53B1ak9FLC9fVoDdHTuoxYl\n95s3/xQpNgII7EXBZ9il6DrJEmsoI3uQWeieCd5qoCV7cou51SFQLEFPM53l\nLeqUZ3KoLXYknd36HQLM1RA97+Zc+Za1KByUDIJ46LIXt1Oun218gbnkZhvY\niYNJJcjnuuO/qAFRAyGJDp/GzUXMEqz2bHzxJJO6Q42gtn8OsSivkJooVeYr\nN1Il\r\n=g5Kf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWINkC+E0Pcv65MIWGEKrcTS/vQphrLXnd/0/nsMSc4AiBC7mKucnM1Zo2zJY5gT4iLRGVhFazOyi0GHEsoI2iq/g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.24fe7ba6.0_1614965209528_0.9396385526571256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.12c477d1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XIR7EGDeFdc9nbOQX+s435eqOGKIhDMjjb9b023eqYS7b+ZiedaRnmWhvj+GHBADWAn0VtY83FCSITR8W4bKZA==","shasum":"32a48bd851cc1ff850669ea653a5179d59bc52ce","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPTCRA9TVsSAnZWagAAtHIP+gMlbzDM/FnIdkm0V+VY\nrGIx0+M9PGPUMwD6PFIYYAliiIpHCcJRZBfA1Q/mryD9aaTdbpqqOXqpPuW9\n2pgSJjCPebKlgN/R5VfU/ie/bBOyaCkg4IIegZ0n5XOnqcvVYqTbDzon1K9c\n2VtHzef/aAETgltjJ9EmGeLy7tR8+XHFouTuKBFKHLoD84LwZjyn2O2SaJx+\nDkZC73skwPiT80zO63WU1S4mf5Mk6o4iA24zsz4N9FHlOt1cGZ+bni1remYC\nY6aM7UPWOMSKr+6jOPOhgdS0g8Bu1OW6Ic8zf7eFR6cCalbuurUCv9K6lr8w\n4NgBEEg/f7yTPF8KIa864oVerc98xIBtz1xgM45Iplb6ub0uBiPkHJvxCXw5\n7Vy6waQlV1nCLxUxQatXKrAgaHSssNw1EO6tNUtmJKZ4SOVni26dKkrC4AbO\nBhjKoN2agWCq3+xun6VrC8l5yBojLJIczdS5pqh+BV4Co/0iTnGGDvc9jUmC\neoJsbpAQpFXq8wh1s2ufdk+9xNW1jgJ30pXlwKBCz5DIYBIeZwMSOLSoPXpO\nBj8tFLsVme5+Aextm0BmvQ8T/mXMRbmlsVhMy10MA62VgtedOnmDY1j2Pjnv\nnYR6SyA6q9VWLXOP1vaNlFdTa/C825hdLtz7ZQhtzOf+chUcCoYYOuVqgRvL\nV7nN\r\n=I9r8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmKhvWcYrE+PYYRofVQpkDjRT3Qii0duBLEQnWUrK/NwIgc/LvmHhX+7b3MNtAttjjj4S0O0fkx0rfA0+TCyTgenI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.12c477d1.0_1615242194858_0.7027422904878495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4c38f801.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-P3S26oG5UuZq/gDopUhWprjPoaQq37QkAFkPBe/EaT7LBK1miu7pyzEx6J4N9jW4ibCoCmtt4qAw0f7e7TwrdQ==","shasum":"24a49274a761614c7063209f66dc849e4cb54244","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIfCRA9TVsSAnZWagAAEiAQAKPXWV1ZlQ/9K54VxXfU\nNPsH7AK65+oUsCUOIGxtLrOBPPLSgURS70RBlUc6bS3a6a2CDzCH+bsYxQ1N\nVYH/g1qXanRjc14Hp6nfUXbbeVHgUNElBUKVrso8tP5OKaEs3jdg3ObL5OHN\nYPZ1hD3hXBM5lrkiPGKlepcL1e4gvzt56w5C5tMbxBa9nKs4PaRTSz+hGPUV\nSRssWNiT2BTKN9t8dZ1bVC9ARq3eArz+jB2LedZd6KSkCj+VHG1pBPOrkBDA\n3BqqNj4E62+KXyC5UJIArJK5CsbnoNyv+h8EuLKVifeE5L/YQyM8h4YBWZD/\n2zKmHrvDBHeb2fo0mhUfXkohlGCcHCvXVMpIsD4aHbU56uOsSpxaUoNCVCL+\nKJbwP7TsOR7Pnzz4LXyQXsdUI50EqihHx0NExLVw42d2AXseAgafO1twUHOE\nUDoPS29UYXuYWJTXowhWUmsTSZ+CRoIsUTdFULdyv1nBnEiCrJVdb+gKqCbB\nPFWAz27X+HeS1WXmuG16bqboXakQK54NVeN70x9RW6uJTwbc/tDTkkSP8++h\ngjCSSeUVKBNg/pYmN6rDGJB2fWL2Nr1c/npJTElI2xno1hq20r4GWuJ4P7kK\nWWlrYRd/Bf5+m1fCAI3t08IyoNygmn421fTHLDzRbsSSiuA4zoM5gksZw3fJ\nGx2A\r\n=NNHP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnTfFuz13/wokoDV5Wgp5v6Rx45wZ/ECYT/pQrxO6ykQIhANvOVrUfqWbR3vwFTYHqGPDX9hnZNCJxYtsNmHW3WnJA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4c38f801.0_1615245854756_0.8611287329472628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.8795b83f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RFCzkVZtMhiuPazgfBaXxf7xXG3bFp/ElQjCwWcSVzmEzNvhzPJkrK2vSu/txTE8Wxjgri0pnl3O11PjCz+n7g==","shasum":"71f8a349a75c7e083ec2d17d2c460acc85fae932","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR73/CRA9TVsSAnZWagAAiXoP/2pkR/4qudiiUh/fzKFp\nEXrx7VrsRE4/1/yttqELKvvnInwmFCTiFHQ7Mg7ygsuFSWh83Ya1QK1UoZ05\nk1EUd39aQKFwrrMKiPudOV4dZiNpsBud9oT4As1c4xoEgij9/axkq7S+5XVM\nVPLEfVu6Uf3vzNTrn+pUf23Ypbq9RDg0WZyW7CM4Gf/QZs2lDFOkwAt2ZbiK\nSHu6W2aeBp0yxMMqlCxUaTmJ/ZGSkQvHc/YxMh2DBuMAE3dBI0kmZd861D3m\nuGsD4eK2o7yi60MKVXJ8YMR/QPlq1IMpK5ZMMkQ+Ibx2ZYYdBIiXIb4kJ3Jr\nbkeGI9u4/vhMm5i1Rdjq44vY0xhRXO3pPXZ3JX4fcDC9SON6783cCZ7+BUwP\ncgVV7pzaEILd9gSnc61CTd6SxERx+641UCaRKAuS/3hYPHwQTzuzqyfW6M8m\nPn4LDYRQT11806B+veH4awOoOD3UAoYioxpafTItV3YwJcposixQaCW/8dJ4\nTt+FkPX0AgAqldDLh+LH5QuBisWvZVV9T4Heq3gK6uBVGxfdKZLjxrEFANNl\n6fKeWBf+AMLIffi6Pp0MZeti/s1g3XjOZ6dC7EEr94v3bhw70RC1mrG4Ygee\nOf5Ub3lnUtVaZNOE3Fl560MCj8+/aTc/cfC/WuSXt1v4eBH/iuMLQrSQ9Rih\n6aWJ\r\n=ld90\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWZg7PysI2VBKKopi/xmasGJeKwSxw91rkBjLqNftMAAiEA/x+j1luemKc2vEVtEvhJxB6TAF6TxUfG0W501J9Ip5g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.8795b83f.0_1615314431085_0.07783275209204898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.12b84cb7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Vj4Uq0f6k+6TS44FEfzMHn/Acm6FLw0tGiK1cFFfON5ImrPTuCz3O9vL7oep7zbZ8s1MLDUff80ET+TNQV7jlA==","shasum":"ac79db21cac4797f836114b365828df9e5d91000","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWTCRA9TVsSAnZWagAADxsQAKGPwqxZAd/SnlBo6+qD\nSwDIo8L7asuOog9qmCoA2MjSpOKrAHb/LiVcM+gj8Y4bEwSOYr9fvtjO2cQ0\nU1iGTkT9rCA2ecBXsq1zZnp9A3bpqpsZ/jsVqb2e5yaI2yzs0c+9SkJwNAby\nMRKMIIaYYuiAUp94cypZqUjn33zBlNvfa1snnIgao2OGzrnCZEMMmdaqUoVP\n6gMB45YkRGCbRhQZsKVqOTUR6Pnmc3KIdRtdnX2nKNQAtHv14q5ed5ctx2FG\nmz60S6hKZi5fcJmx+9RkG07N91n4OCSUgcnrrqNgHSvyYLiG7kJ9zgSz4UeN\nFV97iHheBGA8lObK35pgGXDpyBJU+x71f6XSEvIdNgppZGuCfdlmtHx5WoDt\nP2/2VNvNIY714t21nzwoScMy9BDPj+pm22M+pVxQQ9LOx49xRPyyH0ePQl6f\nQiYNIBNCR2YgPpjmhKi79b0lZ9GE8nyHAR8f2xUPFsWIgDy5sN/E0Vp4hrLU\naB03Iva85pTln+UHnb7UUtcJigWVt1phHJj8Vqtk8skmqeWTCfq/thVihGW8\nLKvevGvJm2ApM39Ki8tWhp2ct5xFzxF9/qkro+x56v/2MglBdzs8/lK1v5U/\nah3SwluFVuKIbQCbDHsPKHRqDysYKE69CE+xSFPb06UF6yCDBPRsAYu3IgGQ\nMYKk\r\n=9hb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxxMQKjuXyUJXV8A9U8q/FxCv3LFwFQe97PLoeuU9ZAwIhAP38xaxj7nSnSaoo1UiTenPT434PJytkaUB7C4mNZxNQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.12b84cb7.0_1615336850665_0.3165474112426332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.6ac6784b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-18EqdYHNhg4kLJF4siHwvQWGokydsJovb8tjAxjhHqm85AqRsBWAWPFXouOfazPJcz2rRs7TXgsW3lyz95L4vA==","shasum":"97fd26fae8bfd2b5b6591a66e6f4f9602eac0aa6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBfuCRA9TVsSAnZWagAA99kP/0bySiqa6piLfChWDShs\nSMLHLSfOk7NzefggmKfYC4jNueWKodhqe+KZgC6O/ZDeO3kePEk7/kx1sb1V\nVkI8P18aLNPsohNZHpv8V6aOndWZLNuAQOD2nzwNcmM1rMfWN0qQSKjb7sQS\n9DOfqKcQ4k3wfOgaljn07Tla1SMre2092xd+KRy2s8a+wvZey9dAGeYfSAee\nGgoIaYxr5cAGqFVTY4qPhWrvjLdutUll09BUoWYJ26zQmNl0ns8Y8b3R4+vC\n326S/5mKLarEoojkwDbZyL/c1yd1YsiStFUYzFeTgJXWGryC/XG8rJSHKnq6\nUPBMjQ+fi2d6Qtnd+syHp0kgkIm0p4UJ95wXX7HurbsMrUYXf9uyD7JiQtqN\nviW0YNsJ6bNcqAYTEsL71AxT6Yls8vhtb5B6MtwIcxwaDLjwzPg2j7exFDE7\niCMSFKeOgELAe3EMh8Zaj1cCFMc8sQ2emtXULokWCmEu07VWvbhV5LFQx90R\nlKxU1HF4JfgMDk2bu7uR7U3wijBxYOchlaZPL6c/M5b87028gZ+V7oH75aUt\nAXIG3Peb/6LqZ4Vj93OdGnGMQ9gCVubjd1x3cz1aNpOrMWiUZEhqO33ajhe2\nWTDOGM1iyYCZJxYtRYgaiM3TtEKC1HV9JtRhXZP1aaYyd5k5Hjp3aov3IYLd\noDaF\r\n=Kf9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAP8P3iBPlH8GAOgGJu+6QYf+cAajxmwygGSEG7W9h+FAiEAjTLfxFfyWLEpJfIsmuy24vuA4l8aJKtq4usN8Nl3tZI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.6ac6784b.0_1615337453988_0.8713173437583543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b6d92934.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Lvv1uV9/9pvALv2PIDQNX7TBNUyXsypHDd4NpaGbloK3O1WSX7SdPwZ27ahdSIC5bnO4YX5teNisy1CEOA+ZqQ==","shasum":"29323c29ac8f18e67953526a7cf2e2dd06ab0444","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGDCRA9TVsSAnZWagAAdMEP/1J53pcSbW7OvUbp/ByW\nkVi+K8IZ116QfJSHhQRvPE9LvZLnz4p+c8ZukkjMFRIjJaLERFzWnHyKKEdB\nkTeLs0a/mWuELPULcdDXQ82XJXA6gIQ2+ZvMcrM7pYDqRK+kJFAtVnILcBPo\n3AqisDZNjYT8VUKv2Wq0Y482U3k0aOLYQrVv7vWlwOLNNciv4zdmFIA95LWD\n3MvWoaml0r7IC0JOzF0JkFRSHCEGOmwrvGYttNECf/8xc5ACr4eWF5Zzj8en\nlfmd9DqlhE5KxxEzzYEbukNr09Ig+zNY6eQ8tp+j0ubKyI8gEd/oUvTpK+zd\nHG5Dt+FjbRYEp3R+Uz2KkOSF9TMK+RRgkA8UzSTqY5HjeXukHd4Y1O2qgJKl\nMKHJ+8jLhC4XpxQzTaHPMCZkzEq0Uorhzs30ji0lPZMotPlTFtnVqySzWBsZ\nFM1sJp2r1Wn/qgiq+frKo5g3hi3KVXlUnapNlooi1bGsw/wv6QtRiszq7ev+\nAcU3pSQxfmjyv9wv0RZZdY2TgSCwHmbcss/MLaItnvmFZX1tphs1pyBfYTL9\nUo+7rTyLxvbTYcqUNMJkHPNZlzFuwyoTSslPhSMK2N3nysDqJjZ2WNnApDRo\nU/t7r7iddXFOSj4M4uwhRyMB7908t2FJ+5JOoU6XCxqgrAqPRdQmBcQXvSQj\n5/9o\r\n=o3f2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT2Wkvu98Sboi7SH/Dq5exNtVZ8f63GeZ/W440pelSTAIhAIPAl/VYYKoXPC+FfmTcyWoKyDEO17fDXGQFOlNmRFr+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b6d92934.0_1615413634804_0.8794786370756131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.99a55b9e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TbUjSFJjwHgL8Ia7fx4nPc0LZd3t2+3EYHkXlOBXcGkJ2AIczCZKQI3DRXksYAWyZcKaNW+NSLwLJCeq6M+6Dw==","shasum":"7bc23621d53f3a784142eef16afd949593befb47","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1uCRA9TVsSAnZWagAAkxkP/2Rg499LMjjbF/4M7GdC\nAuQt/5iFgLOwh7aZEX1E5v+Qx7YtlFtGDz+iN8TaFxmkrYmwtYNG6QzYmmMF\n5+CesJhmzyUbVe3cqygRrGwSvIYloReFR2U4MaFkEShdS4KT4TKBddOnvceQ\nNy0UcNKK3Fb9uoVcjmPcjnt0x3whjU9Q46tDhwh1ATUJ35qWMnGn/ZkEbhst\nBzab/uvDe0Ou+lPfeyjbqWxB7H6qTuvgWIxoxOrM9bMA7TRAAwLsnVP/04v4\n2G6Up90qHH98anTEp56D30I9aapygUq1n8/djiVw36ZKW6xonj3pecXG8ibQ\nT5GGT1V7L6RCDJoADMn2/m8nGyt0K6/ek4HVSHl8LpniOSFNg+QQ/78TJRdq\nSoe3XAPBbYIcwW35znJJKHQIc27uPQDsDjuXxUTxpaLu1gR7FT8wC48EVaFu\nmn0dhzt70uxCsR4JcMxH18PxJcF70rS6Mua6Ip/XFh+7pLhbi/rnZiIQSydU\n9ZEG9RJlWUEpro7DL/7aI5NFN0dU+Xlyef6ox7lctU7hSgOa2CCFTLL+0FLQ\n1cX454qDJvN1eDe+TEp3Z/eGANPNCkBVivUAdYx8Kdb0Zz32lXi3TV45ksX6\nIQmCEtQu0c0q0rrVaws1nvDLy1Y+bbqPzd6qGb9eCAe+eQlyWLtiM3AApgkc\nSCZf\r\n=g5OQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsexKkGp6+G04dMsWum6xn2kE0lSROlYya2xqihOo4NQIhAOo1NJTNhgj54yP3vGHxLlR84/+ttUugVcOTxdeTQ+Xs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.99a55b9e.0_1615416685504_0.0670832062798743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.bb14efb7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-O/NdWDV/BvWtv4Qye0eYTv0Tekzj1RU8czU6c5bXm9H1IdhhFwsEu/FQ3QTjS6QAu8RS8gyD1XtpSljA157Sew==","shasum":"b7dc5ac01bdfec800d47493a5e42d9269c27592e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgbCRA9TVsSAnZWagAAGPAP/3C6Y4uekepA8W8l2FPG\nDNhPaiXOlQcI1Cphvg3yC2J3SQ7Cqs7yDYCo0axR1nQYlFlr/ig6H4KPSt0w\no1NBVPzJo6BZhGlUi105U5n+kDsDN433yy25TAUj3BjNlmIYIRFPU4eAYLi3\nEJjZnl8eebbWPyj9y//EF3GlU/1FqCc06foxdZ7/VuPzEIegupZn9ZPwjtOH\n54ntL1F5b1J050mcjKFeNuXXc8woNqXus1rZcBXPEwHIWXigmzzSLEJJNHKi\nmHLKSMJuRQRFxCQkH5SB4Zx1flMUOEFPVhwOOwX8PBMoS90VgMtJ8c/4UG5p\n+Rvz6Y81NGERn5ip48zskwzE9ELjTyvR3NhRKpJHSOqQJGyF88WuVpYXhNN5\nOQUsjucWWolD7TFiVS8z0LS2u6jEVK6HeMvtJ78HZ3BYbdOU/SbccV4nFgxX\n1ySydESvwpUmBxCkqqT9J2JxxS2hssv2sKedTKYsaep6M7spTUYJfoxNJX3J\n/avoYpUqogpaReeqPjRac7RM4FCIy4Vl6X/53zu+Af7hTP1SlYzLLWOjL2m0\naDyuFvLgwSdNrfH67sbCt+WPSRWtIciDrHZeiup8qKVC/LlsPI1fxlFrTIDF\nMntUbnus9tP5OhA90RdweVdVW6s+wt5cBUNNNE3MUKXC9jhSzfIvu29mXp8j\npq7E\r\n=2FZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEu/WeoB+pgy67uK+I8ifz9UTbZSRgt9OxIKXSf7QKQWAiEA3X71MXl5j4vGl4iBRpc65HmMhKIBPjijmh8lSNgLEuc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.bb14efb7.0_1615419418790_0.017366909313803802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aUjniSmlS0x5S5vMP0bx/Icj9DuOFT5V7tKKYlNeUbdN+D+VRqghcBs5YZ1kGRiT3wsfNOUe5rzdLKBa+uw9tQ==","shasum":"e93dda739b4f6ef7319dbadf25b4ed42cc249cc4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLhCRA9TVsSAnZWagAAbTEP/2HfSVwjX/WHju6ichGa\nHsaFl8bz9cXcmzRVlFT/EyOOVpGc6jkglNZ/0bODajJM/VqPsnbW6LuRTWi5\nagaYZ6/jC0+0uUq4tqHAqgwy1BT1+yG6qgzSTRkTd5gsdgS6hF6AWUhLmhDE\nXbTJKz1vDh8dBMFAuY6rhMCWurO/N4KBotVRllwxGb5DlZwXaFCCPXoDlc9H\nvKTPVMl3f4M4+Ru+UAjVtIFY5/b/2GebVVQ+huPXw1Y/WetKhjOOoxYylo2d\nyKd7xPJXoZIYHcY5byVXgpkmTM5vjepvo3+eYhvvp9dbhFek+rck/qtpW2c0\nvhuMvYCmGzki4YFIuLV0vKi/hrxpvqZ3C0AHynnmoBz5zhdDWcT83wwmqia+\nPrzvwnuVUenY5bAzmsC6iCPjGU24P/2LsTkU5jSsBVmTv8GrpKdcR8iCjhOu\nPXZeHH6rY7vaBjscuQBV7du09p8vUCEokcOEKZTFelhyLal7gdVY+SUj880p\n6CjOQFrT5fC1RHH2Tzc5Jg17Y+K+/yyBdyxhAYOf8d3oseH3Y3ErcXLiDkHm\nLXS8bnLFv45N4GULORbueIjMDH9onXJfKgzYKVfH9lu7Kkdg3e6S/nnnMhe2\nDT0RFGgfF3lqZUj/ThyoNga+6bRsLFV6rX4hjTo2m/l3Rc46b+IDm80XepKc\nEWa9\r\n=/hVK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhyx4vDpSWU7LaKhqOMtE4oI9/b2AxAb1uO43nYpC+DAIgdUgw7zsSTj/F8/XfKcDnMWQTmxW4UOinGMIWdZY9KQ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.9ecf3bdd.0_1615422177348_0.6531373091494301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9cn/nlWZCMVT9lt/UXViaXvERLze9vXP1G1ECT3Yx3rZvj/67qJmqRKr9ZZzfieRK3b0k+2ni1v2uVd/0pguHw==","shasum":"5d0b60b2e5e6cba572cd8e64b002374a5a1d9624","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZvCRA9TVsSAnZWagAAKAwQAIb4sjOcdrwFHaUczlyJ\nVMehhDVIIAOhF5bwMtUxYXCrwlMvWxNIm7/pKdOYpMh3MLOzVUT1fp4uq9lQ\n1OitlfLf5oVuav05SUDkCKyaKoy6zj5OsJl0i5j+lNka0Ovte53wHv7TwMIH\nMopv9yjeq+fgxVSaUKnRQHSonfc55Kg2k97AUCNxGWj6YcOA3M1hsSBeADiZ\nijhu2HI3vFDCvC3EmCQh8IEicOpaXmT4yAABKHtctjOtBJqKGCFBlZPOORKU\nfSp9gFzKunCpR8h2bdzNmIxOnMNEb8dfIcizgC9B+XFehpMmsWlTWqTHz+pH\naOt0WM3T/JIJ/PWWkvo3UV3mFsJ1sDh+2LDbCdhY7rGEMxNcLbgzbDDoFKZd\nsrwqFrcemY+Ht+EPgiCumBfKqyThfrF6uPTikDYMDNVblLoupJePWXTLnnUy\nxL+bT7hLi2hDOVUJoUuJiBRm53Aw0cf5hW+vhXtxTA0wklw5WjTYVcTG9BoO\noUF6Bl1B+1W0SfvZ8vVx5zp1eksQVq/PSAQ97298QDk+aAhD62Jr+5mAcVH5\nc8HtPkXAi7FdhRRFpz7M2i3QLcyVdEUvqlvjkwQt1zUjHhlyUyikmPrwYkoh\nUxqnxRWhpu2/ZekdYmS6t0+cgDxnYMRVnhHcjLr8/lRdy0YzfT9gUgkEHAL/\n4gjv\r\n=0IqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESGHO57Cj/RbHQTyLXlyORsikyG5T1EZeUnAKP6zfYDAiATXMcPRZRjwacGvtCe0ILt2YrA8RQJ5u9efe0qo+9M2g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.7c0e02fd.0_1615427183313_0.032572907158740394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VovRDrs8jSDyLcOwvz9fPXqmC4tO0YJGZDczRzBWkotEPGF5exzBB7BplNiC/HXfQon0BhAJnJqSBi8vy+wdyg==","shasum":"a3a7144e6bd220096fa45cea8156aceff72bdf18","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFxCRA9TVsSAnZWagAA+3wP/0IDva+SSL6hEYd3biFF\nTd1w6JjBsZhCAK+cIYoRn3xSukw/HVhrrELK1cksGS6KQ2nrX1wBR49YibtM\nrrGONak9jZgb42KpcLpSOc6f9CR1MejHvlsiZGWTXG+Evuc8Yws7gCx/7HuO\ncVEZ1ox8cEzqgKmzLxobwECROdKYh3RSZloxWdUbpaI+Qafg86hYPymn3SFX\nx2EqYhdn61u6UeM/gImAz8mXytPbZGnwqlbstuV3sPeDoWMsgQ++92EyZadJ\n1TOrPhzzVDfnXezMJcgr8HNKh3OD0Sr0fnH/wgW1l3g8EdSoPbM/P7TRs7xm\nlnjdsWnh7T2GT5t57JdgrMyk/uBqMdrVwP10Mw7ksZBD9/iwo8H5PyOF4GCP\nIxba8d1iqKE3z65Z5tJHy45wo7oRY4RkFsmBEyHgFhA2bxbNX8hm7vqY2Y6p\nnuBhBirBj4TdjNvuzOahzHCX/WMuZ9oRgtaW3XEU2GK3F9IZJvQHfvQ4sel3\nrpR5DPuoYknHwiMc6wzGQvade7SeFKejFdZHT70pygVeSBuKBoddr+jhL3x5\nFJs0w7bq6hRMgjgj40qhRA6YGoeez4vsau5ITWIGJmMpMxJe7JPnJCCgUfXI\nmE+CtKlMzEjlpuddGOUeg2diOYMWKVRi7cXs2zT/Kgw0Nvc26QxgfEaPKucd\n8pRj\r\n=EcHA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALB+Fm3+tQ80yWfi7oDv4EI1OU0pXOetW5EiWnXjNn8AiEApce5NzDWv6lLinc2aRzqMGm5gIQslZjdcEEJP/m/Y64="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2d6d59cc.0_1615487344732_0.49113063947025104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0138863c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7CAwuQR1SHLTC0/poJcpb42FnEvxu45xW2dLqGdqaryO/yB7ZRmZnWAZHp+73xZ9GbrL5qszt2batCnqPnbXng==","shasum":"dc7cbb36cae96de4eff9db419a46233111c38482","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmMtCRA9TVsSAnZWagAAOWcP/iujMlQIl8BNlsTD4ky5\n+LnIcmzh5q6G7mrW74/Lmnrb3Z19xq/vbCevtgHemnyLD0r4mp6zFhZkrkPV\nzPVmSnOMK/N+IWfJWmPTgeHzqyykYpdaOEUxz4ns1rJfFMnZU6ySbVOycNSQ\n5KQom9jPiZjtOZGtqWdq6LjDJpe7eOyhwyiUaoUstfxNWf0kdI36Gdr8/4C+\npdUMIYqUbaIBIXlBfQaO8tN4lxO7Xo2uKRySz+NNOgKqy4L6GzLLR7TfYT8M\n+Q68nMxT9NAXWT9loywp+/irkatL+KH4HE72hMrKw5tyTaLFVEXfvF5mSEBx\nugzrdotgpYqgcpBMhb+AsBJWWK+Tm9LBWdY7VvkyjS6HuhzWB4P+K3gN1jsO\nORDSRLT8/mqRmhq0qaDAb1E+IB6CrHvKJ+NSq5jM4Wiz1oAS/nGspqbnyDMZ\nqOlQ3qbRyn6VorYjocEcqC/J+37PFFu7hpDWpBfKqB7FYZFLQrrSykc+EjtR\nqDg30SVsPaYQoexAHRDU85P1b9QNVYHsL8wIbfK3ThaMtDuW1fRoH8J4DTUI\nT/W5adreLILz7LsX5WZc4SAETajKrdYeGL7JkSqLPpS3oxRoDMiSYh8/6dBD\nSU8jG7uTdsLWpwx3qYQ955u3zVUj2Z1ytP+ofQddvSRaEyE2MlOM08/BaqR6\nw7Ck\r\n=O6hN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQpxutWJieXjPhpUAkxstoM2dydxlwXxQjd4XyZ9hw9AiEAjuSrdBKjXZSSQtc6ZDd72J4V6URUO3uQwerNlxiw+Ag="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0138863c.0_1615487788574_0.3280579194873592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.926f5bad.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uQ/88JcRiEJ1KwU4j2JY1P72QoYnPepoZ8pNAQQMMTmuY2XDBdTkWlRir4fkF6y6P55ip8axGiHsAKpcyzjpiQ==","shasum":"9892d4a80c1073db81d49b3949b7acf2ea0d2c01","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsUCRA9TVsSAnZWagAAUp8P+wdI/XDDkz/+w5StvayY\nR9nEHAoeddEvrj+sxPoQnDxhje5e+RQSVnW18brmq0wXY/fK9WwGOjaIPgPr\nNlsG1FbpHs+CljMquBe/sCBU/uakuIXuZm89FGVa3F6appbjhpgeGlFKd8Dw\n7+J22YwPgStjA2ld4luIhT0CeWuAmrwNMVYQOebllNHAZ1F522UcghIGHPYG\njduENH6uT0AiLAdhDygkHyOTRuLCCGZWQXHcvzeZKhePWQkZJnE43uxT28Qo\nyU7/yyyjbIyOmFUhj5H0kaz5pYYRJPaY7xLlN7gO0D1VkKy6kHcbofu04Xa7\nGoaA96Rddwk/3EIz5iaJ/YBuvMxPsaJO684tuPmTVKX1asr5tenziaddQjC/\nKYFFStfgZGL8tAKsGz2GNdeNe2S8rP14CgE6h5tb0my/wREG1y6kmNv0Oz8n\nKVHNGefjqm+PwaoJDGB/LbHbGuclKGmPjFK/8SoDhYYus99OgF9Aq8enbAQm\nWTAOBDnxcV5IOQKT/KcgivFXRJmsvhU8qkhvI8DZTDV4zLhJt26HeUi3fQr/\nZ87R8C+Omc+Vm647sU/VcWBDV+7P39rifH1k1lHBJr45V7vXzRFPNjgPljfZ\nhqeq2WcdrZVrBe0q3eE2Cg2XEM4SeYsLtnhdrp91TQ7hmBLkz2g3ls/wFCNL\n7aag\r\n=bRns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbH0YwLtzOvFXCCm5dD8JX8wOUpDjKgj0Rynh34DY38AIhAPuJ1uO84qD7i8+FwtJ/F7uvFLGaeOKBUi36On6oMZfF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.926f5bad.0_1615493907890_0.8076196806690965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.520290a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wM3ndh/mnQaKiVckwU9Bn2Dz6PizXjnCqqPnqoTD+P0uXUGtNwnc0KlTzKokHVMd4QLQlof61yOG+gBNtH3OdQ==","shasum":"1424e18946242c99e10b2e5b9d56bf4c75861346","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplcCRA9TVsSAnZWagAASlYQAI42/6sIbwMzpiHhbIib\nGCSdNvee9Gru1urfZ0uVrTnRfkT9NAMq6VEExd2FYnisVzDGtcxqosXM+spU\nyfGC1pAcxqdFNBbVwy8pIrWTm3axQ/bxyJevvh65Kgazg4nfcUiTQwJiYV/g\nEX8wlO4ICreEnYvNL2FFPAzq3LFODwbd8ICg4bwet5iMBbpAzVIi2wA1C/0O\nGHa9UfzV97foO9Xv6OPPS2HSCf9aimggyPiPSszAuVyBb0NJeGJVf430WiVe\njiOY3wl2H23luZCGADgnb0poyTPQL+5biKFcDURMimndXKRKm7bSYd+0u+LR\n+Wt0cupYH3ItlONYSxnc8BIycr1oY1fOTwf/HHuG3ec34GZjZMyXffzFjaol\njzy02sTEPxsjOMNuYqR7KRvgEHnI/zvc+mB2gVxVyG1ohVatJ/1ktVelFsgD\n2pAg1llVJvjllAcxSrFA2ZG3QEWGbPNmBtpopBle+isJwO9PnEJdqWcvvz6r\nmxXza298n0oJw8Lcg2zgjL7Jbe+oxKOGfjfbmg+3RAg4giW5uEep1wlF63sH\nB92m3qwenNYsQDYVlqhK3bnqkjT3/L0FkjtDT7Hmb09X5s86FOmyJJQU8UsX\nEFUfqgwutmW3MxF+ARXA1NzRgBZdAXzpmei9aR16K7oBio6QRaux6PfZl+oN\num7e\r\n=hpmf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBYQUnC1NPXkJAZUWuOaJ7phkLOhQa7VRfRUL6N6t9WAIhAIJozyx5l9g1WUsANZI97Apd9OJAeTS7Oot0l0/8t4n/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.520290a9.0_1615501659880_0.6516473289012745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.9ec431d1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Xz5xzK+IhnHuP1QRMm20djiddSS1yJctWmlvlzZoRSZm4Sb+rFkaLaQ4pl3qvTLvkrjphvldybaC72+m8qPWDQ==","shasum":"c4bd830e8df16aab481b400350cc1bdbba4018fc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppfCRA9TVsSAnZWagAAJfMP/2ua58XNxB6Ip+BUiNwx\nZQhqJT5Bu3g3/Oy4qotoQfxKQZJ4nAviTc7Bp3KwUnjYdqjjUXisFIQri237\n2Sxoyi+RlG6uEOQKl3w18Fq/Adp/iJifGrDdQ+HuD9LMpn7IKIIc1AmL1h90\n+MWLRQZFE/tMx3kZUQ/BZO79QFc++A8qLKQJPsPrhoHmShTbNM1vvkpD2IIP\n+62LozoqsVFPokfOyxVVcB5a5XEOXLkGZP5B5yWZ6N8Z58jue/3zL9MM6CdJ\nZwep1SjrW/QOYPAYzPrlmtFY+eVTdTzze12ECNpL72SWVXC7TN/sHExsiPgM\nxbHJ8MGpmf/go3jBHKJbDPuKC17lm4C6hOxvVhUjagXi1y8fH+NVyvZ3lDcM\nlZAOnGE1gArqDGlvvOlMKRz+o2bxuWmxaZ+XSS70xqTlhLdmWk2nMOagG5l2\ndFZNo017maX/wHaSNtrAnYvh31B3XGNnh394VwMGT7S1th9T6tz0aZAm+63B\n2xP0fgGfpohKizuNJ0D/pm7H7q0hLiMVqurpze9yrlGtQTmrwUkHKWpsgwPK\nVA7hQZ79PtzyKjg8Ha+Yt2GgnVrB5TlISsNY5kHaIOf+GZhYWIGtCUnBQt5t\nyVgrdQr4Pul/rUVa/EbTNTqUb+Q07XzQPqgn49eF6bJTinULOCMXAEaq3EfI\nOoUO\r\n=XcPq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIrfzU5a2MPW+mM1T+Ydye0HRtClbGnop3tpAlhAL/bAIgHJrfUB3NNZrMicfgznkxDP7AC407hjexkeHZ4mzxfoA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.9ec431d1.0_1615501918683_0.1502080936652206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4246c082.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lMJdwqzI/RkbAoRtPqC3XnxLn2I+qyRTlPeCc/KVj7tc7hUJGEMGUU0a+6JiJXJ4741NUU3GblR7lmeEP4jcTQ==","shasum":"0f8124f694ba4e6bea1ead1483788e9f60739b45","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwICRA9TVsSAnZWagAAGicP/iijwi7uqjNUZ96LckNu\nKNiLLEsOrdvdhX8uHx7xx9rcFywyyKy2igJ6i6/Fk21oZyc6bUIPSUuF0x5+\n4LpexnEen6zsEuioWNYaT5aC+1/O1HvuvzajxmTr0cdVEicMRur2ujnymMJE\nlhkEBR5g6iPiVuy0NDRn8rkYMEZk19CHmMAN5vctdDD+O01WeJIGZ8ymMrEd\nLvLH8IOPEpqBloBRzv0XGtxFo5j1p862M8Bt4kAhiQwSiyDAzPpxBOmg4lna\nmSrukItj6FsADvUt1+jZuRkK6+AiK5IUYAULBS7FVKuVHPaZrsY8ifBmKZwE\nODyUQjsZOlU2rBTOGs4xr3vlq56nu6Vq7upwdPucP7c5l8NZEcT+tHwB9qzo\nmnLLSCr/RB1PJqTUfPnZqd0PjE0TC1fhn/B9TZoNfYG8tHDWa8Cz5CkG8NxI\nR/V4j5ADIneZgZPaWQLx1v5A/ghPHX0CusMrfaBrP/IljdfOypqD8GL3OCe6\n/Dmjz6+PrtBt5x51zzVfo/RCSZ86SnQBt8CD3cvF9zCVQcHbMUzxrBAfMzYh\n5K/7+HUjejvxZvRySg/Nz2RkgLQtE7IIpwCbBFnfB+XXxTr0pZLAhAOfg7iI\nHnrFooutr30UlCH89G8ydH+q2uRuo+R3b9PpxixqRxFvLoYTqbAsA0i5sXsD\nJiNI\r\n=aNPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYM93zB7bVWKc4wtnXPMWugUamDBm7rCrQyRdbibpJBAIgNbz+dbohUurb6qDnnJ7p/y/EN1225rq9cV0+fZHqS1M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4246c082.0_1615502343750_0.15649936630261108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.2d736253.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-o3j4OuC1rFK+wAlahptUBBUUFknvtD8wyAKqlqI9AroiS8JMa08Y8PYyqPZ7WTAc7zDkiu/p3cOKMcSv2EcKdA==","shasum":"cca2dab05c5721757921e23609d45f8a6cca5af3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+EyCRA9TVsSAnZWagAAQB4QAJW0FdH4LdXBNBZGiHe9\ntKTnXyOnUlf08Lh/9Tv+Fux4mcrnLd0zGzzeji2FsIF6BbZV+AnN7KPbWXOn\nb7iz33pjRIDGranFWtl4cZNvcwRfHdH7nVX4jVYV7fsH8zlhAGPtn0fUbeIH\nCk22awjQfSm03+6l6/gNcuqIX2cxFPTM3D2FT+8BhyWB4wRcrloqm9BxrX1k\nMib/fZVW88n65mbgX9tdazfY1WOWLY2qQBwzEkPbDqItkX10+r36UwIi8j0B\nx/QPP/JGaOiTtQ0HrXKr/JMqgHptimekCcs0lCnHWoGAVnwcwOj+0UeirMjI\np6j6d5KgoMBl2Jsli6SCgNAVfdGnwPX3eL+Cwny2odQBpfPjvLMKhMD3rTmK\nWU4ntGMB7LnUoMzOBR46jc75dsETaQMu/Vqa9RslCPHCP8eQF0Gz5vs9uO5Z\nCe244Ln6yz75OpTFaQsIn+k9OhDReBtnS0q6w90n4ocm41r0XlBfCSge/zJk\n4Y0SUBG5UnlKkG6oQMOmetlt+mY1MaetV7j9Vr7SifqLE7QzQlkbpSCwGndc\n7gaXR85jsJA5ZUxe1zzR4A1c70s/V8SxFK8rPSywbRRTcCqdbTs36c9cjOic\nMPH0V3nsjHxsJuIKF1LF5kePUqmWoERno+AD8bECkSQ6ZTVZBsaRilrnOcDP\n8/IJ\r\n=Xv0+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhP/yL0VgPVtiZ0u5E6hLLLmsFbeThzI60rYdYvd11tAiAQwC6lpWcn/8beoznLEt01chWXolLhhRKYZ4zKlvpCqA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.2d736253.0_1615847730018_0.9864049803387944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.7033124d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xWm8GLprt0vWma48MHCL315w9C1aBq/aUzmKQ1hot/E1we4EUPlHW2nkdcL+4qsZhMtxPyPcqg5BcLHecjRWFQ==","shasum":"3440046f377c9a749317a6d72d9105ea9632a20d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrdCRA9TVsSAnZWagAA95EQAJJjQfcTtSsEMa9+mJvO\nitpDVq0x3HLdv+32HfdqUOpeWB2mlgJasTz9iup8TBA0cWPi4e3L4S4ofpBz\nNOgSE7WODiFyIVRXEB0+cRGD69wO1aQVGnw7LQnZIz0NaamW4VPEE3vogAYO\n3j/B/DWdFbe6Eq6eFInQotzZIdYzFkaz11zz8sKDJ2tHYYpLYcfwS42az+BX\ni2+BIfdUaTn6DHn6So9SzCtQBjow24oLr3rBbbZncGGXarbV7m+KQZ7cQl6o\nPpzQEK3SmkPoaZGga2YrRUc1k1gi0EFTafy1LIOReCLSSb+36nWtbX8FN/n7\n2l7Fk/OGb7qpMhjAEJPClqEQpjYPQnXk3fJISf9qbOdMZGVbJHJRawp4zWlK\nrRHa/0FbngKJZ1X+IQ88eCprVNic3aw3/oZfPKgaVwSj6T9fXShC3HkMZqeH\ndFAo+VetwWnfl+rRpq49RhVDzwgQ/NOJxw1CebdVvgjn/WvjukNPTEBCE4Ac\n2c9LR2J/Jsu6xHfN+hWtRWy45Zuwf2CLdGdNfjG9xqTFNieK2u3dGwSHcW72\nwMK5VM9u/y9b9s07Vy4I1F4HkuAraEQZXv5Zw9R7imfI6I2NfTW6Tdngeq04\nnHj//5oitlMvr8KhzdMChDZlHRrE2dEb2DR1aVQpuXygg+EKZZNe4qYp4d6i\nzg4x\r\n=/mH/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvhtABIw0utr2eUSoV7YATijeBz3aVI255B4PPZHVZtAiBQIW1ghWRSpxqGM4Bnh/ztjG6ngruOvqqQfd7Oty52rQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.7033124d.0_1615919836557_0.9683595970145427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.6c0ee901.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6tZf65pHynbg0OTillF02baKQstsIeQwIHw+chOKkYgCLXIkuwHYTooK8bk/ICOdfI+dqWpVo8a4SaK3o8wn/Q==","shasum":"12b26b0f91f3ae36606f4e70ed61e9593b95a0ee","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTN0CRA9TVsSAnZWagAAZQQP/2O1USAjYHI28tyYBTTr\nsve7oEjZtak0L9P0rInt6LduL236is35fOMzt6a98+TjwAZRCJ9gMQklEcR5\nx505HzL5tnb+c5GYHKkOb37lQ8st6PZkERpUFJWHNxM72Gy9833wa8EaIW08\nDssbQBdqti/tPsDGE1JPiNdYKneZKl5oxL/EAxz9CgnRAfO+GOJUud049cKo\nzSAc21+ot5I+/I/ptISMVutXFsGRp1AOg9slU3x8WPd3DITl9uYB/zAJ38SI\nDdEsAKjWltPDE8j8QAOjm71ahTe7FNLCUQVR3j1jxb6ZeiHsYXedINv5O50y\n+WVimhkksNxttAxTP0NIHnHtdX0NlZAM5Q8xQT3xr75yn96MgfTU4whxEUHf\n+yCJ9vzaM4HZn9LTEObbXrf5lBgSRkz/mLjaeRSmobrKVIMATGrhPTwRfnqu\nECckX+ctHNhmBF0eX8IVtJqMwd0UB0qk1Tpuuj5ldvyxSbZPgyBT/Emzh220\nmkdT5MYm5ok7craF4pOuPct/HIWmi3OrCITLMaQpZdeDSgUWtRr1dSCqrMtY\n7Wi8a6gr2Oh0lpxcMzp9Jw75NJ+aUNj8fFvXzULACYjBBOXBWmPaG+LdQyTj\nw9zYYgiPccmqKdmOrDaRzsr8hOZelVMH6C19XOEWalb0fE1uL6wyQIBai08p\nsU9O\r\n=+VQl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhLYWYIH8r/bHy4yNJhs6iM/QezFhz3AtyjZ+OYFltCAIgMgy5WWoR6/RQfq6lHQ+ZFsju8+eqhy2g3DnDwfQrvFY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.6c0ee901.0_1615934323933_0.19178410649281274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.7f0d605e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UwXmmGhaiymR4RsPaD6+bDCKECmdZUPLU3xJrBYL4So9g6BcnY8ti16WH2YJZywGQz+utcBRiXJwUams+5XPrA==","shasum":"e1041ce2eef90837fcba731a891b99378c207f7f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSgCRA9TVsSAnZWagAAgNkP/1Pzky3rycJwzO43W7mY\nyCXmMeOALxLlrBfLBMa2CU9GiB7FyoT5ciZG7OfwADo8UIOeRXnNbBiMehfB\nlq6LmJWp6Dpi7hHgBBROG5tFqO5QA86aSXwbs3kyXWJ11xVbsRWKwXIePOp6\nP3pUfT6trdRu8Z9EJT6B6JUSphNhSMJ4P9mdj4lrRnxq4QtnlxPPcdhqXHSd\nDo6NshfNErpV9ByGfJSbcErrSW/e+ets8RV5dEIEfECBiCxP+HWJrgy0KdGF\n4AADJdvbdIlK1zP6A1atWw1k+Qn9QKI4AmVqVqQQjPwOEHy1kn/2V58FPpXh\nDwaS4MiwV5zm2LTMw3otKZpOMsIOCIiJn2XAP2foXTd3LNCqM059y/hNi2dn\niVXNqZUg7LzIw0RjLSFkWkB1i2XLXXKF43FiMsNl6BJ4lSUBBTdnbL4TOGD8\nD0GhrAGuzQV3MxGMFYvzFsopYbVnw1dwpmrPd9/RI3SAorzisOtBbi+VPy+p\nNlcTLz3hGqH4wmP40BLQ20CMRiawFgnT4pcKlT82T6i6Ed+HqRXc7XHvCjDG\nq8hMj2QZPizcRbllcN9TcW+Lmi3zcDPpui3rqoI1jOyJrsBCDDIkLfLow0R0\n56Cdl7FZw8RbBUPyfA9iLCUav6iNIpMDxbQMBVG5+DOOYJGPm/2BTpDMTv8C\niOl6\r\n=xu+o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAH7Vw38DC9MyzaXl6R/b6yeZm4fZbFBGdX4Jk5tsk99AiEA9FiT13XJTUxnY2xAOgLcZAh+OfV+Le5FA7O4hDgIXOY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.7f0d605e.0_1616004256279_0.5543543762981509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.572107b5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fjW7IidekNKP542YvHmFuNttmeWUm2/CWx+fo2L28U9bjKrOllrrKh58Q3guDpScT6LotG6JfI3xnywegFhK3g==","shasum":"9397269907e6742052d419c6eb8dfbddfb6c2a45","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gZCRA9TVsSAnZWagAAHVoP/2drJeEo7tSgW1sCW+zY\nIT6Z5D3byCKUYyBo5msgztKrMko0Ha1AcMzVwl5IZUl9n/Dpv8qtqyNZzPkh\nYBP8zM5zhWG+nbY2esFyGTPNk/njOU9nYr8K4ATPqmuyZe7C71TmSRgHXUIW\n+Iqs+3MGCPONpuhBhnPFRReZ14MVZij9VpkyoZNW65mZyrEd+7OZ6kfx0r4s\nueTUV2hGguwG4ZsFJO9YnOoMG6xR4+3wUlHUUVnAA8PwUCwT87HIE/dHYEM9\nANLDyXFs/KIr4ecFU/UgR45LVIZFWX0Ta5Fppx0bHrz7dpfj9ZocYjARfHxw\n89cH++NV03jqUwNnjoVbOzh5Z1J+jgyU0wqtovNfwr5HPCFkS/v+RsVBJxuS\nFA9zdau1KzbOUY745fR9gjpPklbyQLCf7dw75kGAiV3NZ/Qg+qaC6qboOsAe\n3+YLcDXpf/7yJiLN1HhqpxziNNyg25bOtqdOH8GAYawfnnyURAbnrX67rB4H\nhFFHabuno01Xmb2DbxAeZ0V08noJJQiSiY42sqmifbj/n9wFMdtjSblLHPg9\nch6aLpd1QfBQOgzke8PA371EL52mVJOcS5wkti4qJu4GHdDHSXoitl/1vuqL\nGYvrjBOhb2PcLVa1fVrPDL2Nu2diJHWqf3PV19JqTCUPTrIDS8Q1w90WBGhr\nO81s\r\n=dg8h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx4QZJdIttMH1EPADrKa1rrELoJNhABtkiRYRRRZaYRwIhAIR23nTURe1cml0+yAKw4IJI8Gi+l2A0F28O4xppiPR6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.572107b5.0_1616111640670_0.13986627402289975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b7b220b1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2YadQmXUsCt5PsNK/FwcdmfqR/y+XdjPr9Snz2N4GcSzReuMs6u126Ajq2/YYVnQETfH8nfqFpX8SueyN1CGlg==","shasum":"52e06a74050e4be39fa1a142764d19b8bcfb1b3e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4gCRA9TVsSAnZWagAAtzUP/iYK58NQpHgmt7Ruxklo\nP1cp69wNn4ox7RI2IewqCZYOsR70rUGHZXLOO92AaOA/lz/AFnN0LFivn6oI\nFoNRSupwWnw9i4CGx7UN1C6CB29VWhsPjXm81HX44gXHGkFQ9HrDnuL1JUgZ\nF9L9xzi0ajQD5UrujQnGFO+j0iC+cwpyFt2PdLLeVcoWfUMfpaMAebvS5ReD\nrwYUQJA25sxrdGGpa1gzXiBFuqxjYc7QVA/ikIqx49eZ0htnO5KT3L/SIn0h\nzqWt+Iddq9lB0xUR1+IynO95XzCZ+OCiK3vVcZTKpLbD0lpgUE38m1RNwD5g\n/hvcrIKxB2KIPTnNtP/r1gTC+7w9vYwPOXHrHn+PxxK0aac3OQmkCitNYyGs\nDMMpwhKYyi/BfmQjGu8NrRiYDAJKB62YgP0IMLmBfbVWr7VbxQtJPv6I1Xl2\nZgWBu0pGgmI2eksgv8TvaoLeG4mkxT3cHzQwvXJLaf9K3mhe/+YMHzVUQp5j\nQ0Z6k+/julAabUNek1ZJJlMTtPmugWXbWeCKFQwCvh0mmRIHwpecSJvbkt68\nAlxPthFII9WfbDSrGpbGOuEP8voEdsl7UDbqlDjYgYfYUMfoRcJCX+33sPmQ\nGfME2XwxU1RGkISIBjYuVXPUYa47W4AZb7k62APB8Pe+hYuVJwejYDJeAjL1\nm2Fa\r\n=fFLm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0wETwZpGWp+jGULXEJ46NxBqXIATwExEDz/409oAxWAIhAO3fm3MwuEQEDU9dIrNGsmOhWuyGvSAoKmL2i/iSJaTW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b7b220b1.0_1616113184462_0.6606563078201304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.233b2de7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mZN1V7yS0yNM6ncGo37fCD58784tBnWwo5recdU1kslo6HMYdsrj/MRYGrRBMKieAVWkVyzf6PlQ0YVeU1oyyA==","shasum":"e3bd30dbf41916192cb5247301ec90fd69ec910d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2TCRA9TVsSAnZWagAAil4P/3AcE3Q9SqR0z8+fOVBT\n+fTH+3i68UyM75xvPv+H0aEdmQgv+slBjp3Eo77+jq937toU2Sw6diR2Ln6j\nr2PQ7fknxt6WdOGAD7jIr7b3anAMi76ktQ4nuZxJ0JF/EUS7MQBBWpBAQh8j\nodPj5VD2ZBhVH9BiC5yREA0cNNNQO7fGLeeWIU2IyHsw7Dt+WmUSRZ9EDfDV\nqUnmA6qRQe7uFnOhWgf6SGjvVAXr4m/pcXAOjZtXjW+n93grsDO714Xa421J\noMm3+Oc9g/FEXO5ui+kli9lK62KPyHHCgC4SWsweksN+qfG+kqpEa4hqoSqp\n2B7KDUC8qzkRfb3ulJoGsQ5pByTVh6LSPiZ+dzVpIqsbwcoBvPJ3ZI06YVEE\nKynkPlfS7gkJVlbtRWf/I+ia+x21guDwwnfB0NMQvbOm713IAilkNRGel21L\nyWnF+LPexjycP/hlFZ1ji74SYGMvlqrkS6865hcrYof4h/YOIQMq8mqxRT86\nTr4KVEzBhzT5PP5fNLDvFG2lFq3UV7UIGTLKQoFrwmqFtLQZnPkdRWSSCUpI\nC6wbwj0knBTrXXwEFOGQnM03YhQrDKqVTv3mko5S/zcpF/L44VSyY2xyTsga\nr3dX8ugSLOVyFAO0r4tNbjFNdVxTqBG3m8tQYxdKNNbdMfEuO0e7+gVRpBxU\npUt8\r\n=GpRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmdRctNZV/onYBcbJA9afnwm9MvHPRgTrzFe1BFwXGvQIhAO75BM1v8RnbLT7lmXx4GdWxAivby7WXBe7UyPjx3pEi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.233b2de7.0_1616178579194_0.320612487819371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OQsGu1jwZSc1gz5T5F3ZJ0x4WVpFprOJgh0hp4l26ByO4ljWLgECTjuzhVVtk6MMjIREXOcaKC1QS3RcGqLpPg==","shasum":"44ec48dc5247d6ec1420e1d02a415d6cc85d2c63","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRW7CRA9TVsSAnZWagAAn+MQAIZ/SofbMA6JxuR6tio6\nfzR5yGdi7aVlBdpv69vu5vhjbyZ0AVeerBL0cOj6cZAYFLdSxvseZ9r0Tyxw\nOOItFxY1tDbfZQImfwImSNemfYYm0X83RhYTg4LGexHHRe6hj/cim+ad1VzF\n0fx1m/8DZwvh6uK58Fmd2nl/6Ax188gB25HU3pdRHEucyxRDVSllW16O+9kA\nTHXLP5q0Yxjvm+pmcpsecnNEZ9LMjCvKtnGQEHRspooCj0luzLiOVSotaxv+\nQT2Rjv8+de1ZyRUZpUBWz4mw2/eYZYmCVeSWB1VADKtt2MyUf0CDEENBMIRE\nIkLOVmu7+gF+s9e8uHqgpjyyrVMiVVXaZ1Veg1sdIP275k2ry/A4TT6rF8qW\nw+t1STk7XghYxST4+LE/FOhdXSNqIuL/OS2XG0UsTl9gIqQPmOTN3Zggpu4y\nhr1stIy3Ic2qfHC1tleeSpusP/LwxlCi83x1LBBqVsV4RBChwM39sb5PvB6/\n9uKG5Fe/CrE700ygqQFmqpZ9xZdF06ZRyhqvVSs01YQySNEQ8OnpAybi3A8k\nIZdcAWRu/PRAi+G254PTAQYc89bETIO3dVLj5FEcmTCrq8cxer04iibr8eJ7\nQv9tW2oAm7asxDUbgfTZlWsNkubGE2e5sMsh5oc7pEpOX0Kap0p8+zyAK0xD\nIgj1\r\n=9ViZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChuvT4OwaB8RDav1StF8zaTlAxxxEQr4BVFrqDudpgvgIhAJCHpMtkJY86sRCRH2wWzBy8b6YJEGRsq+YOzXNHtXFv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0c1a2d97.0_1616188859406_0.8980508048753086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.57ca2e73.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jOGJ9ADJzcaS3xsiZCHO57N8fYTo1GTNl+bIhgg84duIxVwbVu6sM4NuJmdEPNR99dvBetEdQe/KKaY4QYu8Kw==","shasum":"9248779dc0ed56203a8f6181d2dd14b142ab082d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShjCRA9TVsSAnZWagAApJgP/A5JrM/B7gpf9gxwaQFF\nx21CVU1YE4/Ln6zhTm6/plEGl1smQAZTVRX4xn01sazgb8Kr87x01kQlP0XN\nyPXsjP5Y9JZd156fC42eVFEKjUDD7uxX9gu+JvYUg59MlKGyPOmzC/fusR8P\nO0HFeedyjtOfyrCMuEp2hnq7hNoAnCQLdKXbvTrBrerxMkY5ROxV70imeNoV\n9lkNeRWEYTOAezwGcqrYyaypelztYWn+obSsEFHiJ7TrnARXVlVF/oV/jjXt\nhR0JveFMeaxY1Ff8Kr66rdmpbQi8swNvGKsguZu4gtx+A1E9mzQ+hnBUJs/L\nTL3BXkNYJKFJoNSG70AEotvVSeBXXdEDYCpli/n/OZ801aqc0RB7+8Pq6naM\ntQLv/R7Y3cCf/Et6lOxv2DEMg4iX82eJq5bodyq/mCPLfU5mGTXB3qbmLNre\nkL8AXHZ7C9wyIVVDEFv2EYfNxf0pVi/heWZlhHMsh9Uc7WQa3YpF4CAw26mn\npBKyxReCzMlm7TRC4sCIzfsp+WOS9UxRXr8T2bnfyzeXBMaJ1BYAhAC4YDCr\nezXOOgTMALLgTEYsUvQIIXa7XNBk4O4SKZJfctOJdWwUTbJKkvyt8N0x5lzI\n8BHSmufEdeZ3ZFpsxHxweQqKnlaO1dlYhQHpfOf3Bi5ZHJccm+xcj3KHzzRQ\n+1Xs\r\n=7UE0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgYD3ug3FrBkR0BQjQlchUDaLpysxd3LmwG4d1xvk7+QIhAI7mTBg7WR8deAIVOL44t+L90fovpPrNMVYE/ykYhYRR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.57ca2e73.0_1616193635227_0.3036184012401786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5c058f4b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GOdSO1lTOPzfD4u/PKLCqsHCHoCscMGMgWiMOvkTAQoES06BEBbrj26XUHEplgwoZsMPDvJy4Q0SHExHua6t5Q==","shasum":"b6d0317270a61bc390673c002f883c20fb16d520","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTeCRA9TVsSAnZWagAAQBgQAI+Xrg6qKMlczPZj4z+e\n20U9TbGtLGJZ4LHrVV61W424QEgyIGUC8DH0ulXoUzXdivYDmPmfmlcYVLxe\nz0hC+UtlcF6gMOAgQZ+CTwtfp4ZBMfgLpM/uKLYyBDUvct6+EpH0Wjj3NOml\nZjXaQd/8Cw/zo0I00BmtptXCq09trHp/aiKYgFzFN/w00EB9aJ6eiMB8cQpD\nd2eRT5Yy5eO+8UZ7lK2qwaVeG4Aipfx+0UJ9IzOJVYwztyC7KCWtGBciE+wl\ndstFB70tfRgJ6w7krhqlO872s+Cmz+mXthdihCkzfzifLai5Lnhw6d2XA+6U\niFPwapzLznZa3VkIx69RWayXk4uOB4FOFFmI04FU8iAGu9DKWiKuJJHDyd1Q\nTwI/ZFe1G7VbmFGXA8CJW4H1G+VaNaR6GyQONy/q5F4PRis49A79dlml0Aa/\nmmHrwNGiemgKP9jlzcH9pNx46tvQIU3OR14MXi1WVFyZPBuZYV9Xv2EuDYoQ\nslF8Z0Hhbl+tph/3ARkXP879TdxHhZ5GsElTkzyXQ1H6Q5iAKiP+y6c0ClnK\nNWIyqBVr9StK8Jj6LZGiy7od7/RrfrOx+G6R9okCxiiDhW1G8FI90Loh6P5S\n/Kmlk+VhjjxG34H1OVYIFut1HKcEo1oWlmZAPU2YtNyOqqjHazqsUE+jPuzY\nnFfQ\r\n=aRsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBawVVWVfYWlRs3dmVBDVZk7GyFxHri92R4eqlhZGRrAIhAN9SKLHf4TKy2LwkawptoYvsHuubGJBG/e/s83/qJHRe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5c058f4b.0_1616540893820_0.05570318159381449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-k/TSw4vb1j3/Ln3pFzeo2W0usrYIe3qsEccTvxiR59pmWjcBnsa8VSV34T5PLPvS3tvIrZ81kTGcuttaQeOw7w==","shasum":"6af4ac257842f0d30b17861441adf24e42960bba","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XYCRA9TVsSAnZWagAAx5EP/1qCxVI15TSsRkIEisuP\no7dAl+Xw7hOUdFNUXfZntpiu/0zSQOy2EYZvTWMT18jbv4atmTcvP/Fwy6EP\nC55RG6R9vnC3UrvnPaImiByAuUw4GYdRwxyxmAmVC+5Is7b0MpANt646AB1z\nfSInOGAOPzvd6nrKlLz+JiKQwegqiJKVE9RXWSxmlg5o32kjxMbf4PIfkPKo\nPxWBWw8c1gxJt8vNq54WX27B+b6Lb0f8Hfx8KSU53ZaKcUSYw3LaK7FTjUqz\nENq4sWamiIFkdy+xG22alIHplKVHpLsvwnDCGGBpQ8R4bFon/tjwlpxGNOer\nxDUnS9FPtUk5l26Miq0+0yxvcokNxhcg6UOFkZk27BJRlxwnqPwegF2F9d7/\nx1LaRSCZ/mJeUDArqjR3mOOwYpLUnGWs1RYDk1jrt+Q6SV6tvw9qdvFOnzWj\nX6l9XYX0HMbUqUa7LGyVvzGFGQ9uUrQTKAnZHG7yVA33TS0g8h8P1swGNwQQ\nHBY7LnRYTC7GRFWPDzTZjajVGz3k26Odtf3WdrOBSle3XAHBc6oXMbtQYc1p\nhOywPyHDVVNuZe9t6ZFoM7OVj+ekprJHp+imC+0FeJDhTpSJC4dT5I46DNe4\n2Zp7yvbJXSDckictZk4PV1BiDvSUFOi425WCSqDLlzZ9VldcvivVUhA4d3bh\n9R1X\r\n=+oIA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5+sd4Go+kx49EtINZ0CK21t1mpXYjvuMujqSS8dU/8AiEAhWKJnpPz79TWuuaXjb5eo53Hed6ssSP6SREkRWl7PYs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.e27ef7cd.0_1617135063942_0.37216500907404604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.15c09e74.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bYnCl2JXQJWNcum7WZg/alG+cu6o6uq9acqBbs8Tkwrjt7bW7Iy13TmipkigNhFANq9ZUJb1TZPtapOWP83tUA==","shasum":"e386e0439278ac5b2725c3b411695568cce47580","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":66434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKeZCRA9TVsSAnZWagAAA68P/A1Zx4Sg2W1K1a2z9jQ9\nWPxsP9ztVvW3ZzEXeUhZZ3Kj1lmF65cveQ0D8tTlabS2hQS2YaegTO74zsgC\nXow3pQaY4A5Hz8GNny+cxkRI+ga4NyjAk4GmoLs4qZptWljmVYH0wtDAZJAz\nAXLlkfRqIFazAOGGO0l4jwrF0r14IM4M5H3p+9Q3UaRE4qjsKVuZzaAklKMA\nCW0Qd6QOU9lfG410KpdYWpSsaj0VcLMw/4k4msOK+flIQeBnXcLXSQuOP/bS\nW+EFa2BvLR9fqVe//iEVKC+zCXWa5xPdz6bieuaAwawl6QovcYMkbauree/F\nj+uLhag84w2IbJY4P+Dl0WenW6cxJ0u0KS0+DH9OYqWCA8F4TOhifGyTZVV3\nS1/VsVpAMuq9BiLg1CaTI8S9S37BVyrtCzJtW+5IdGtP+kdCBKEM8prxVFO9\nls7IQ2NdUV8Pduz61W663hZrxPk4lIFtmq4I9WlCwAfUrCJPAT4AhKqV2O3I\nrQ7BtCH4drZc+ghAN2pC5l+d4S7tQflvT+ltziewcI4pPcgfsK5OhEjqyT6V\np13nioxfn8xlfrxNbsTD3HEHf7TiWJfe/c9mupYJnbpdVi08NaKulHr8S8N6\n0ijAqmvL2SF1H/HC/1mMqW94qIM8lCIz+O5pAXJzepzC07dGPrVzeuoZM+7K\ne5P1\r\n=e8OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVdBzmJHAe1+FOFU2K80sj5CpEPyFSsVliNRqZqQXw5gIgUFkf3X8Nk/uMBl5BT+GcQupXHm23rzI7uLht/okF9ds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.15c09e74.0_1617209241483_0.614246021011418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4dc32be3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Un+eMJ+uQL3K9xRWmE7Kbp/XPfSosgJTJlGe8asXRCLTMyQDZ5TlfsKfCZ4baPG2q4RLzCCrVLqE11AUvRw9kg==","shasum":"0a034eaf0aaef61ae4361ed3756de6b18a31008e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":68107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQorCRA9TVsSAnZWagAAYKgP/A3FYP1LTN1IYex9Ch4f\nzq4n0qopXZeTb9/gJjQe0YwESJpPtAzJVyoJAa3oHAG0ogl/3WRKJVLQVR8V\nh8KuKiVPc4fRyUtILSQVvk/7d8n3i0ClVBSiqgLnpRfAfMuo+4Nh0k5zevT8\nCGN3thd0+vCBl5IgY4dOGjZOWmGQbAK9SUzVnJR/Pnb6vxJbs8kk+KCqIPjO\njkAukHkGYlTHg4dO44jK2qbnzhDlO9xrY+D7DS1KHbGw3dH7QzB0zEBHmHuD\ndqFTyEFHtaKlCFjdhe1Bth/zyG+Z3Gt6fi08lyxoQLoZt579pJ3v3cWYpiIV\nkHezxU8iGHfq/eNO/Fspzy6AkDNJr9XvAmXmWv1l/6XU7ACiT/CR6EKvWYW3\nDQqyQnuCpw3hVEVBE67Yvv5Bk9V0YSd9hr4yD+WQjy61mOvSdk5SzI1FKU9r\nJ1doeY7e2l/uokUTEJApn95KVGyHdzu7LMTr9e/VUkbB6VOXPlH8qCpO1zvj\nC57Ir2upL+OGhr29/G80g1wRXmNxRjQy4xAoR51/tq9XTgadx1zybVL47Sxz\nIPutXkZ1cFjJ8GwimjpOCdKwE7m8AVCv/dQVy9VaiHv25976Z+MfMYSPYFvV\nvPgpzHJx8+frFB73uaYMnE0sBHcX9WZxnbQWlkbK/8rqynU5Jm2N3vi0/cVt\n8GcQ\r\n=hc7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdbM3KNoqjSvuVErOGDVXpZndF93gjWFdh3GP/4bUZ/QIhALtOMSsje2ovvb9gHSGoLYA42j8laHVtwvMNH11LhlZ4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4dc32be3.0_1617234474734_0.8774660913931771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4b717f65.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KxCj6j0ZnVudoZKJBhVatlLRnn2Te8P6ou5F4h3ViJpLO8/9jeuasGmM9b2vSym1PpR+s3yXDn9SbY6zi25n/g==","shasum":"073cb1a100c76ea8470894ee844396d2a732ec21","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":68107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1rCRA9TVsSAnZWagAAlFEQAJPL1dQUohDHWmjeSrMa\n6YDMuwMjOo0IfdHr2rNPj83JsUy/3zwYFrqwFWoWALLQtF4rS0ynTmOkcaO/\nsfKdhAu/eFyIu/xTh/fSnODXc9zozrf58I/hlsZdkbnAjd42SD9J5X8INwOH\nGdjZcjz2MHz+I57ffoA4aJySudVRqA5gVBhv8q4y7bb2WyPRmiPMttKyQdCY\nX9byItmnGbe6YIS1LjSV/BKjvGOS8HwQTwElOgZi5eKjSgl+xUiMy5tsRXnD\n4CPsbxFtAAQ+sOJiloO1e44W27vfglvYHfg0q7ImIXRBDLLYlPxFgomrUzIH\nAIwg3LGylRFOff71cstJnN6P9j1un5aL8FOUGmblSTwK6za5S8OQUUHcoYjx\nRIUV5ptDB9nawZu+rjaHtVA+oFKhtxZQ+9+ShzZ3qCDMVKenVrQDBHQGy06G\nQATYNjH51FvnDwl/VTRLxwE8mnCDIYgzMiT6+wehHzOhUJCYyV48H8lWQYeB\nHCiizxZnzNWFNTlMK3Xv8SpcjFsSlaoKxLrqBk8gi8dZERjMDxUtLXVdzUZI\nRfqfWYcNaq+WcHdwvp0+rm5XLUZXSnj2YvdLJyu584OIqRNtcSOStShSNZls\nUAh0CHM6pdMCeL16WkntHt533jeQwJvQkv8+N+a+Cdp4B4YwsgUyw+fFt4dA\n6tEX\r\n=Lq6s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh3S3BgBInpgTKkZVODdYixk+dPSssydIBhXKkkTTh9AIhAI8fB4jsR+kYxwx6ZupgM4tCQx5fuK/dF0T/7WQPgY+x"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4b717f65.0_1617300842623_0.4023510496504157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c6870f20.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DBtaXXckELBf4Uwi9Kmv1jeKn4f1jqrw0dhW/9LVTqE5KnQbkfc3oqZ9VLAC0PtWzjkNuKsIKV9BOUFE3qOt2g==","shasum":"3240375f98f8842d6f30f2d5bcd736e26aa85876","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":68107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlo7CRA9TVsSAnZWagAAdh4QAJ9K/Fn8zCSRl4+MLqNZ\n9fO6PvLbTgjNirVrzo+uG1M+RsSt7Uji83V5DyNM/rO15QNWXZaj7oHv73sC\nkr6cKafjp+DYzT87aZ6El9IZ3j89h9zCZPG1/YgPQzH7VhwU6ndm40lh1O89\nq392i8kgVx7Zs+t3C222sBKmjLwXfKmuYun9iIeUakVJ8XyPdR0ZLJpY7qCK\nFjUZA5ktji29Hd4JrIX+Sf10Jb/KE3cwp5OpiR/t+qOFGHsqygZ2PetLBbbd\nBRacYSFZsI7jRAdEnzJa6s+wqiThPYgU7G5c+1FFeWRsBIG4UprTJHdFpVn1\nIOoD2JDPUHZDjkEk2gPNQDyY1PJ+hsosrVbs3UgvjXzG8P3NOZY55p/JXvGH\nicDBI7o0Is7bOq5aOtER8SBzfIvZXKUPAlu2O8XiWpctesL+1HaohWJZXt3x\nOVqjFn/PfP+BnhlX+pMj6vSrU5/rU4YvfzBrI1gPRMu9Z+wclzVj2kmpUGgi\nvioiDuFG5KvOFqEUOJ8pRzM/26awAJPnFDLf+6fMvi22YBucHtZIpN2PBYTs\n/bjF4X5pjzeBXrJ5czxHFAGHrR0eCIR1KMQHaZa6C/zbkoMg5cNgi7bDwzgQ\n66vJAIR9su3wKzkXvIoK4X1S8gQY7cjZn0DqaUCOK+k86uoms2A+fHJFVVmY\nNuK5\r\n=FojF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAbni4XhTzzyBRP5TNdvSi/J4DxZKw5QEHEObEXhqULAiEAxX18EKz6yAf12YfwuORoe1Phz4KHfqsnKVIe39ySHME="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c6870f20.0_1617320506928_0.7034679084645141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.852f873c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-V0d7q73Gh6tiC4LOyfOgp0DMqaeON32O7TAYcVxKwcpf+6GxQeB9jfmMMX6aFHxMpJrtLVHpPKhJ70oJ7RlfLg==","shasum":"760fd8b9de532a6972bec4594ce0f6ad89d4c011","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":68107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqnyCRA9TVsSAnZWagAA948QAJtlFgCf6pnioZne0UVm\nUEuH3unlERRXHEHn76lgxXsuoTcWxfWyG6EJ1YSCt8SCvlLcPCVqT8IbcLAh\n0QbrOuJCeCSaqCHu9ZS/XsAkNZGZiAnW/1T4DN/OXwMCKG19iSYP+nyAEZPM\nu+B07D5YdyTB19V6SN7Md/StU7RrDeKYyPKtrm6HyhSL4RMkUM11OjHlr8ih\n4IACOEJ3vO3gtt6YTkP33HxUEeev0vbHu5x6OKLjqqBGVZlzXEAjCbDd140P\n54AJ1Q+OZy8UJccYjKSegp6dLMOLwz451au2zrMvnfsEU/7qEEYzriRduvq1\nQ1Jj1NX5CgahKggbel0iWz4H2focydL6yvP7voV6PVHoXrCIR6HOJJ5L5WQk\n+v0d5ahbHwFkVoXjgEQ4JsqW01+ItGoZxNya5vcOUPt1cU5j0aEdNcWaJ5lu\nN12JJP8nnXrJxJWibp5/RcXfZzShi23ngar2I/UrGppdfR3nb4O4vnlevaE4\n8qAUTKnYQlZ5k+7ybX0NLL+51oZgoO+fGFbO+XB8DbBSSm1/Hy/U/+LxQ8va\nbTasD3bcWQZI/BVzEsS+VtxZpYdlw/fUZm6w0uKz0DfFw7bRzhITLG1kLZ9R\nSp8qScXP8gGBr2tcBu+KlYkURsHre+NmgNiN/yyyAGVpZjL9xaBQlcTlVHiv\nKXM6\r\n=J/mw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpYkgLj9B+3VCRvGblT7fAbgPxrSeyj0bp6TGNnXBnsgIhAOjuFEnhKpynAO1xuAxrOVNh4amqEt2HS89039d62VnP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.852f873c.0_1617340914017_0.39747463590370247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.4a674a1d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3u509LYNOpRgJdhFNs2M9cqzjdmCNILFv92dabhYuXCEpyZp2oOsCFJOoVwix6mlgHSky5JKap6SNtzy9VZ28w==","shasum":"24be362af1cca8b65cfb6a288d5fd9e3120a004d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":68107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy23CRA9TVsSAnZWagAAg1QP/AreCZMntTn2sVSCt7dh\nILc6vmy/j/tuzNFMiqjv8ecRALIhuGZQeso92JeU/Fdt7l2dPffVvXY1UKGg\np2GNb7MuKR5m89HFmPlxi4gh26qp33cwwOhFa71w+f4pCuXPSB8z7PUNlwsw\n3iTj7lPI/kw93C1yc1jz5DKL/VdvqnnZevxDrkMf9IxVHS8puFwxHoLIFS48\nZK2uKb3vWpKWTfZsnV2FLik5/8lRp40k1LAAGyB5+T8Ok+6VUTCs6d7p32kf\nR6XtLzuZFxxjtduMjfe1dZqDWbcxFsflAjGRyU3JEMsAsbyvcsER9bC0r5cw\nimbABzDeBD2eFWlzm9dED+wEI6uxG24LYL4QX+u7tdiZZ0RXhD8IAdhQz2me\nO9Ely+WHMQbMl9Xc56TXAp78HSyjXWv+8zKXg2ttG/XTm51sryk9UM3XFXQR\nZW4OzhHEa9kW4nUUJ7LxWYosLLJl8JrP6hSpEYiy+d1596uSUIfvThvN6nCO\ns1JVPc7IlK3HM1l0ZJXGewzifhOzn4PdCUwkYi0YxT6lnFiq1qhzjg87ifbW\npVEjt4z2rcrJlMsgCkor4VINaxSRmK7TkfGRTSj7uzxkqNEI2qWsBnl97SJj\nOgRY2VX+5hE3MOUdQAZwAWiI8Ph+yNeXzGFelesWNnV6Z0tzlcJwmGJ4NHT5\n9l2+\r\n=gD9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfrx+nNt2ZSmIr93nUwMLOWFz/gDU/4iqouom9g79HwwIhAJATfa7OdHedP0jDbVXX1M4tPt6uxYOxDQKfl14gVJag"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.4a674a1d.0_1617374646828_0.4237176030077183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JX3gznOO1cK8txeRoPi82ys79AK7N3bfnCPyG1XGYHSeeb/ce7hpWzz23V6QmYi0QvRteiEitLQvjOJP5uBjyg==","shasum":"dff71ac5a82cc61b317b7f198408fc108273e634","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga024CRA9TVsSAnZWagAAh0AP/0WrTe5JRs+CcpVHHeZr\nModdtZTcuUWgh4KWJ99ngDh+U/gP4TdRtI85vax6/K5cPXc2EK2rjJs8GtX/\ngISeumc+EwVlqHtmaLF0mYFo3jqWwKyvUDzd7rB6dJ2NpMer0LCGafcM0YJe\nu/xUSayzcDEiQnC7hnd74Hl4kvPir8FZzsSv49rO27Do3xnBkAVmH2usXFf0\ndBwmfTjxVo/dgi0uxm7seL8WWLrk58JzU/xdsBMuswozLTjdC7yv/3vc27Et\n9+BRu1rmvTjdSTCH34BDuZrDo/Sg+5JVRFy3sUj8aOJ/mSZcqrm3yki2MMUU\nYrNBFWGyjcVa+OW6oWIQXyUVKzGRMZSMEShGY3SERxil3Qrowmbz0mnfIvLK\ntFLC7t6sYvP2/3hNbZZCi/ZnyMUvSNIWoMho33VpFCeAGjsJvUM4mvT+P4DL\nIILVq6nZl09BVG8vi9zfzKokq40M0zKdRoQN4/rfqjSOJLFzj0Z4g2y8CioP\n+gWDEkzREOMnyx+OEwi2HH8bqygYcdiTeTkVUzpKLN4+fdqzDgCCt2mnB6NJ\n4BUB2MpiTR67ugUXBfZzcfV0SEH71G0KgYd1h5gumTze0r/PJN9jI7RuWszG\nKIg1iz+qvawSM5NypUrAgikJOFEAInpR+rjNKgSFRwMmqU+koLrbYjIfrNNX\n9K2Y\r\n=Gtsd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVbmOYp1GcWvirjurUmFtB4YM0mxHH+AZ0mMfk3pm5LgIgNnRVaZnzUWKECaCHyaFEb0aSAmbP+T3J1heguPhhxT0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c5b29ff1.0_1617644984168_0.7364600457334776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.583644a6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kKbk3y74ZWl0J+S4XHwryUhcSBWcs8Ma/+YXCfpf1iNaWTjuG+gvRWQIuKEBee40nwjr7dKNScwNY7O/7A9jjw==","shasum":"7e03750d0b479fb57e285d9b25beadb25d9153a9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga035CRA9TVsSAnZWagAADeoQAJiUq7iWstI2gABLNwnE\nnAGUopPU+C9v3jdbfJv8WX82ZMxHrzORWJH1H54J8YBPANULARD5Z54iW5tp\nxyFQ4UYzM4JzucXmExhZAXcB2GvcIWfBCXN+LVH2J1dmU91whWJFHjRPavDL\nzYaHeGo11Xde567e8R+FxBWDwty0nj8iIG9iulzUjZjvPmuZ5lW83vSjeVDQ\nt9U1pFSL4544+IcDAN/IPqyUfZOThLZyqmQFqy7c4Vu3Kv3JjRT6FtEBJbiJ\nzCv6OoMm52jw3r+D3sLRbwmPz/Qf970RzVlKvZ4kVEtMM4/Q+9SQwZK7ZePz\nwQgyW+AYEomoKpAVUt+QBU/dA/zq+fZpDixjsZpcEds2VjDKgtn97AYe76DV\nKZNpHEHZz8YFpcKbn1LsEwdFZP9ZHjD220HTWanKPhQxJqsW0bF+vchmUeuh\nWs4716o47cg5nDyQjKk3aFJjDLM6C/QDFw3iI7BrvIZtRmBcjQ1b1C78T3O9\nbl4GZV3TfLgd7s01IPIo2vue7syi2NDhJuiVQZBN1BjQJ4AzYt1T99rS8WUz\nMFzD8TRiofTMkOGZDPoIuQ0ITgx77mlH9mIgou8vR6wE/p6B6MXTkVRU8ZfF\nWrR3aE9piSpoEq9ubk4r4n05RKv82kbie6ArMbcfNmL37ymSiFW234PrLtnz\nvTBw\r\n=xzb5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFF7wkk+4MayvhAKURo+VKbm0GwuJCG6ca4Ee+cOdVsyAiEArt0luXWlRD+YBlkr6v39itrzCY/TZTKzCN/oBnt+xtA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.583644a6.0_1617645048658_0.5056170823451813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uv+VnlNBiHevJ+L6bITtnfemHAKXdEo0s7kiuB2+cd/JoQF0iYDZx+iJUTzB1UYcvquyICjkz/IRNQLZVS9CGg==","shasum":"bf90866bafcc2c0f389980c4b63f553d6ea38b49","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoTCRA9TVsSAnZWagAASLoQAJhXmCWF5UMaTKN7e7Vx\njgK43Z9c88QpORfrLxWHwqI3BFijsxKNEArQgW5L6y7w9kQNx+7dlDVvcVPB\nU47eW8gQHMsYasVOOj4WS5tvGy8qnBOJNuzIGZdxB4WH2TKYq00CPJkWzXDC\nLTpAeJb4vSJIfazQHtiFGoosJmm6Z4kWha0NtsoJkcZ6N1XhchP/d1ZXZ2w8\nhHfMreLRD4dzyOIqR1FL4tXT8JCycjS830iF8VDXqU/Gn2qQ/pjSbTPc09ZM\nan7wgjIRhc8PNhJJjOXTlVEXs67LjJjq+6wR2xuqRV/HehePevendkZHuEbV\nh0HFh2gStghR/Gszyfs4ENklZ/VhNLdn5GX9v83AhJfsgsTSLdatx27C4DSY\n719wDPRRnVXYu78xKaR2hOF4SJur1wezD77Uphg1D2wZt6ReerPWCJrqjJ10\nckRq0CaVGUCSQnqgMJeMeSwep7ZOenAhFzUZ8eXcrys648dnTPiyik009OzH\n8VP3v7fiDhNQqxKDM67uAKEckAwzPfsEDqWGhGt+le+MusbgvGDdNY8Nfaa5\n6hjOTBT18E5aUFRvkY1L47ytF7Yz2MQROB/i6u3kf+AN6uSuHUFVWkXjKkPZ\nQgBEPIH1hOUYABEHTf+hTq4CipGCGwVtm7N0hj3g1c9nVjDa5y6IPdVWFF4o\nnC09\r\n=Mkgd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH638VSEznc+fnOc0A98PBO0ZBNd29pC2IHJRqQgv6IrAiEAylKl22UGon8Udfzu2RrIdUwUUJVhJUJTmiVvzqj5myM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.02ac1e6b.0_1617734162722_0.7866318379080262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5ac5856e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ro+lpxDIniMrwWCG5lbeb9QbeMWohnHBJwTDr2sAug/n+qZW/6loVXfzbA7XYZ8uSjvYfASNqUjaRlhOw+MJTQ==","shasum":"fb8e7243bcbc90f011dfc8bda3920e799b880965","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuPCRA9TVsSAnZWagAApFYP/29AoKwfbU4zxuo1ZMP4\ncR4YN2xYShvwwbAnuxYNLQP9/Qzccx3gz+/q6EqDVbWSEqsKaoalfwOIdNdd\n4KJFCMTdvAqegJDgz1aexiW8PVAoDhFpmyitQ7RwyOR7zIgGsMIqRYVvsG7F\nbT+sVYuK5ZcMet0BncFt0Yr0c6yM41TTPTj+8F/4e+Osy3J1S9z4inHu+a3Z\nke/tYB190cXwxN5rLz5+Jl/nTldGK/xqmloUsazxUWIRaMZHAbMxlE1awpch\nUZVa5rL+BjWoMlsMVaJ58La+P7Nya+Rfh/6Af14o/O/OxwGIpVeD/Kym+5uf\n2KPI9y+ocbyqYV9d1AqmgrI/L2v+WD+ct7r4/ICcgGNA8vAtPRpPrYkVPZ0w\nzK6/a2zMmb367c6VByL+IIWhJMAYisSAe/U0n9d9tqu++ISQ5h0EENVGJtf9\nr1MRE8NhdSd5JsVSh6U8kj4mbskUZ23C9PJ/G2sNgXRH5KTeNuPIiGD1hwWy\nOam/8/ieteWuDRyUbv3dSUC8YyUg6d5W5W34hXr4Edw1DT8Z9VI4wKkgYeua\naXotQ3K4RJvTiF19/ZkxbMeDJSv4LE7h9H5XmwPTY8hZzQqfOkmM+e3G6LDW\nQ2OSsuK4MJXIDClES9MkY/18GCVgLPBVafRbJaCzyHvx0JaYL/rF6IX2HIBm\napmJ\r\n=IPnF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDupXrDfc6xJO9OTRFsoG/HZZdjJmJW0OWZ93AYhJwBwwIgS1jDH6rUUbNTf3SODgJYm5ijPZUDeNMzrBF/Ah82XF0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5ac5856e.0_1617734542910_0.8154119738456556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2GU42mL71Gty7pj7qC00bPUceuXm+T+tfm2/MB1s75lFa/k4WJ8alC6hJag/txrwKqNZws9P63LhtczYs1Zhiw==","shasum":"47acbeea7e297f7805ba8b51071f5670cf3dd46d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLSCRA9TVsSAnZWagAAYjAP/32zplP22bQtxpTj2msF\nx2r8GyKMhzaUb6jR2ukIuX4Cpcr2Eo7XgQB/fXaM3Wa/l7T7ge+0jQ73O+kn\nVa/Taj2VMA3SpY4jP56jvnzCrYIEji2neMknxgo48Grq6e4ot5Hrp3OoQoT3\nR8WQFqdTfOAjZCRNPPrSvWiYAR+tyvB4cjyWSf/P36V/yU6+Jb3vH8pKI3By\nFsD0cY0bH51aszCKystS1EZOhO1o/Z8SZ8xM+8VnZ9RyVWmqobz1irxNVWDi\nUaevCQGA+z4nOEsZBBtK6yWtoVXb+AyA8HMUSxG+XCz/BOCFIzFGBh+LdE/X\nLoUfaLfbzvpIdnPYhbdz+gYEgVusIlnSpvJ0EUU8R0micQyUhCpXVIr7JWA7\nZ9CUe+K1qREy+gG2/ElroeAeGOVzp/W9tS0SCId/uvfCpA/EYFIVyvy66WNL\n5isoSC6mrq+3Onp9+Bl5RyCkvvlzEgMqE1l1eVkMtwltFCHrKnWqtsi3e2L0\n+qntm0HUAy3o6b5yX1BHWfujoZHSikfk6vWVbUEO2iKL7UKM+Ps4wTBwpdpl\n6SzoeYSZ2GtGJUy1d1+VoHRy4FGqzQjNnUYBjE7YhqDS4rjIbmIsttpSbUUA\nVyOq3hDOtOCeJZnEAS8rIV0xmVkYqvwAOSCDB9dWPpa26T4hfG2XbnYKG96f\no9Dr\r\n=4qc1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT4CF/2Hxu236QIuIq4lz3XrkYWW3V2UQ52DrCN0y5+gIgVyic2U2aKuWKzjmgbogJJcMXrZCUY8OhHOLdEWhaq80="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.bb23dbc4.0_1617830609661_0.1714548249160155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.e539904c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VVEPwJD8kXgmMUXFO4kE7xC6x47W3JDxmtsDorR85cCV9eN4N41PtVQziM7pIoRgqItMZUOL7cifarBYslnzFw==","shasum":"4e3f24e3e360a8b2c4aa1742e4807b5a7bee9ce3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UKCRA9TVsSAnZWagAAGHYP/A6RYeG6pOMAq1JFkqz+\nRXM+eMV7NQbKgBDNSMh0599jSRO85pjIoH9Q3Z+Mj/3lx/SgPpHOv6bccHW4\nvNSShXcrpbvWvoDImyA3t1zHpKvxCEiTle4QuVkTEI53pkQo49Aye3OSrwXq\nPmSk2fvzemPcf7CkpJuZkwjdKPP5E+w+gSksllHxHnAry5ZpYVDfZFBQlx59\n2feA5pYZQslrK53W731CILw7nB+fYXR5Yb6ioOZMBJYUmRVp6ioFCl4OClqF\nDjjoaOrA/u2LqRHWOcMAO/FBCdcROWFBuC5GD/XWSwlnsG6ogTdEJCVkym4U\nlBcdp3/GF3B3XBvS90JnJs/2ilBp0hoBxJ8PBL0LqYwIZQl2z9fHzTDpMgvj\nqtFzdkaZTdUIkAMmJJ9ZubE2vdm5JFR1rfJERb/7NGS4TljFwIwtYihvf33b\n0aLerx9ehB/9v8LY9wsQxmSHERxKe7q9dGrqHj7uo0mqmfvS2cU7ANgNLxtT\nSwCS8oaYtqsGgvFWKEsEO/1QbJHAemSbfxbmrhiSt6k1QxV1wl5Jj/wngaGf\nHiKRVdOAdbJ1ET/j7qj6c93YTAoUhUYFPLUK9Y8xUWcrYNylV9DMn70NwVht\nQ6wcTZu/CpuiUneHTiWVvzhxXf03mjAXDZN7J/wYbDA5uyO/vII2S9ZBvrXY\nkiFL\r\n=8o64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2jyurhYhS4gWeAZnVo3Jv2Pri2dkpHzuTkOqJAmVLEAiEAj/MWlBGXNcS0GgAn86iKHuIqIuT9JQdDD3Ly0vImPUE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.e539904c.0_1617904906322_0.35822163474191915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.a93ae333.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-J8Y9Lc7mYG8zSIcDjMVvhRbjgJkci7P9uvPs1cNW9KfiPblL0W+zhHF5zYJuZA2kD5VWxd6xJKdO0N8GBr9aug==","shasum":"ab99aaa47ba90f27d42735bec520e4852f178c04","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTcCRA9TVsSAnZWagAA91IP/iyKvsOC5+hmQTokSld2\naav1/fvS599bYiPvAJjKXSXhhhi3t15nv/qlh/UAUSO8JfFsuISzcuO1ANEx\nk3eCbl4gZSf+dKvI821bwyycwhk21waANszOQLZScskBMfxZx48sbLrGty8t\nixBI0kXn19UUZgbD5HhcTV+l8kRqUgZ8jCvfzdTEbNEfeze52qONh7t8VwrS\ncQChWIhNat/9vOWGC1by/iELrDs7IPAIptx4WSDHpeUuT+QdntLmbHPbBXbK\n7n9ehY+2Ag7RjWgcfdDdT4K2OYy6LKiKEgSL6o5BIwIRcjcNI0ZD6xXzf/gP\n8oj+iEz4aBtgLF/J5ZcOVFcq6/y60j2lZ6CVYa6PV875qxHUA3A2RSSEwwZK\nQY4CIIK6JAc/PkLALZMl6hwDFKha4N2/U8cqziTMIfcMymU5H3HACmcwcTap\nAMR0mch5ZdzGpKenC0BEHt7m0H9gPz3wGupMwiZdguA+XJk9DXKX99DfRCC9\nBr26gkPivF3pXHpG6DIJVFjGJ4QGytLi/FpphHZRrBQfuEnVfAcDhjq69Wen\n7nV6SXpWDqKXGgIU/DS0X18IoB4BE7+CD3L/3rdT+LT4az7XcC1VoRX4d1pk\nNdzbo0DdfEPOF5uKICL7YjvJzNypSuQ4YqZjPsBgOCAVsbDoemepuFXLDwiW\n0LW9\r\n=SEF0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2XxQPBYG3tTAf4gzskErLWkfOblNiWKPntI9Ijgf+1gIgQI9n+18G+em/6IDBiRz6Zj57/pg0K6ThL4jIDEkkvNo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.a93ae333.0_1617999066726_0.7889466458661984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.e142c144.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3D7uSoKQenF1QV1WdNj2W+k22fkVTFzQLYSEWOqlyDsWEuCma9+Vsmyh6xDwcfE1aVIZbIfl/fgWna8IY/Miow==","shasum":"438f7cac4732bcafb71083c11c141af985112a30","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4sCRA9TVsSAnZWagAAQS4P/i/8zs3mqXRFngWkD8kl\nMjmsPZV80ilBP14xWXBBS0OQ6lsFIbpLnzJ/RYTFrCfV1C/hwGfY7DeCvw/M\n0+tOPc+83mlYo+RwT5Uq69W5ZbbaH5ic5hy8WwDnGENurKYiDpZ0faBjP86I\nQ81G6R086Rrl9aAA98wMu5pMVckWL2sS2YwUYjjXXpedyRaIwsBP6Q5L2GXq\nYmPOqdSkT5YLTGf1paKBSKfkPWL6Q8adGYpEHG/6x7s19jdW5xa+IjZ7OrV3\n8Xo/vil0pHJPI9iIf4IXnifMCpQA7BuRM7y1lACZ4AAs33wI7Hl0qh3etNlM\nAKa8wx4x04Ofa7g/ls50yzmOw7QqkG1R0Q9JtpRa9QU/TQfTTnN2ccvChVxB\ni8KqjUk7H1Dqt7vq1zg96Fa7GYe1Ux4h4GlNAbS8UvDyTYieHwF49/SvcwEe\n6twyeSKz3qL/td5qMIXK8u9jQsAd5kVC2tjC3Ro+ubdPobKEYZCx7pg1mOhG\nfr3YQ/4PjxWinDS6K3nflwX74la6wptnuKfxxPx7sOXldZulG06HQaKdI6ZX\nx08wSkNliH2WxxddDXsPTQQrxfOKm7S+pXWCTWg0qLwPJsluuWQLgOk/aUla\nPQOqM+/ISCvAF+aMQkmRuMomWxS980zBi7EtDPdrFYjXIicZG4z+xWFXF0I0\nLVJc\r\n=LCOn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwnBqOwE6MPWoj1ewGCVxGxOW6noD6f5mnZnnrC1VZPAiAeBGbQelPqEkaU0DR7ib/C2VeGzMjpxWzY6fqmDlnARw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.e142c144.0_1618239020189_0.4657919469099405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.382d7eb0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-S4nlVO/wo6P6OAfy0sbj7pD11IqRPFRGv7z/UDqipX3ndQxTfyWqVnt1chjI1SyGY4USvfTaUjLWIzOqO6yr3w==","shasum":"2ecb22832421035f25c53b4d169e14df97b421b4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQXCRA9TVsSAnZWagAAIy8QAJpM4kBJuq6KNKZelpMI\nz/cXZeMcdsCTgh5DrQkD58ru1tlSq8Xa5qBNCZDCcF5QVfnwh4R4auMK0NGB\nsE5lhzhU9k6l53H82FAKIlTNbreskfLon/CYKGjCTnyHcSNQ92riKQ0zUXEa\nCxIX8dWQbnQq8A15fDvnv7u1AwQpfy2u5B+l9BpiAd/cHZAwhh89LrOk7oQ0\nqbaoZrQ8MK1XfCGDf0BPSI9GggG2k4D48Dy4TCBdBlUXbFvsOj3IIEF3kauo\nWsWjvSW+ChZF8Z1/PogPiW8VDPb49Z6cJcWQNPkm5XoVdcpxmLLTwxzPIDhc\nvAlVyDxz/5Vh+9SAgw6DtlmrMffn/rY/Fj9SMdgAN+eT9iZPwsuQlor76B4j\nJ7MpmJJxnD4aSgjXGPTjxUZT7gOD0oc6sqsjGhvat4nJRF/pyzykcA3pqI5a\ntQ+qIttdgnS4Q2yFoSWtafP3CwDy3j7BYb0eCy86KNO33AU6TGSnLM6mM2Sx\nt2tCFSFKBKiWkRi/bGtsOxIHtBCgtDfBA8lqgelltrY72DyQ79wSvfaEtbod\nuqnobfbDxf8Ve9sBj+ZVXl4VChelhhGJmdCkc6Ra4PKya5f+VR7bN/D0OdyL\nzctTSizzPmFP05BemN9kyFGs8q5+/XyPNE33oLCHOIiX+DRvyAOjs2J11Apr\nsFaD\r\n=kTHG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmR57N1X0DfdOYlXIk2Bf9dt6Q0w5mf2ECvtgdVER8QwIhAN2pnTGLMOtIZOH1Rf1lHRaNdanCX+uMQwIdtHQqpzjp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.382d7eb0.0_1618265111529_0.05026850114824266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.b16c7885.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dD2pWtUTBnNpL1OCfQ3//Hs7bqLKxj+BBd0w5zJpDO4o5IGoISxynfSFxteVFDoFAM6sKphuCZatNJPRIPmmNA==","shasum":"3f51c0c169c12901dbcccf3b210cf841a68a16b4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMv/CRA9TVsSAnZWagAAMwkP/jsapHfu/vLAFkEzcRPU\nFyJumAqQHSSEvvkYB6VtYJq8d97tuCRddSgg49GXGv6d2/66q0P3XD581S3F\nrJQYlV6RiSDvnlV4JDplhAqrmDVucUvbMb1VnieBS8ugQfYzV3iDUZSnVfbo\n9VtS3alL/qwkIMRL+ooP/J3cEqHzmPMiaokeGw+Gomr1DMUNhx5te76eiO+B\nWPv90TjQdKc5RyxBMYEe6gSVbCGFHLAWDj5i0iD2SFnbBrr9Cbsva5/p9jYk\n/SD8rmrFk2CSKGrOA/Cm00ntGPt8Ne/lue4Gtu2TTSQqhtfbep8x7wGJBsdf\n33vjlW5mkCADsBxJ42GUbYVifD617fhcR0DxXgJiEwPL3vyxPM/HUBCiqPHn\n/Yn2rsJa8WMmkGQ2F63umhWK1jtKmoKtEpopVPPrM4Xige/hcP/DXAY6UO4x\n8QY85rkLG4wmlz5QRbJTfZpoLbW6OhDIwh306katAgAWbnhDoaGfgVJAzf/L\nYfRpXdUo2dXF1w3CRCL1V3/LAuaA5cDgjtotHGzYYT2wpDNoZ4v3YiB6G0Sb\nMPRVD+uhJ8F6AFCSYXkTX5WY9dXEJgoRnv+VBon+aACDc+4Qavqqvza0K0e+\nD0B/lVBcM4sUIftU+rzzMJdQydB2bySUl9lNgNNLM6VgaR6MP2WaxdlK26d6\nXvWe\r\n=UuS9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPDnedlrDBGDQs1DfeFZzfY9pXzU/Xmnz/T01Y1VkTVAIgdZcPiKPeClXt1tbwX+TWrexwmbLUTgTlztTw6KxPxjk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.b16c7885.0_1618267134662_0.9161750763164895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0e92782b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-W/zKsFyqQvASyQ7grP2uoFBxNjRroWd3Up7xHCf95DWE0cLCz5uiVV1u5sKg/QgKPcdsSSBfW0K0hBohMYr/9A==","shasum":"4a3108fab236460254ca847be13669a26369fa93","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2cCRA9TVsSAnZWagAAatcP/Ref9CulNFUkOg/WROP7\nIbjKWLWTrDCtm4jopvkL7ifgJu9qz2OQ4HgA8r5yn/MEgkC7q3ljsirFi/Oh\nWPMuueQZm+xCdZJGxbF/nxxX7zHj8hMbTNhomD5daBbHXtKyuDuJIE1KmLra\nFMompiv3XO70xxcwkLEH65lViFmWJLMy/TBmPIKvG3QDF4eh7cu7+QEnyzsz\nzFeiHi7Qjv2mug4uG4ekte2RtDLT6dIstQ8C5E1DYm/YsJKP6uPyvpB+bOfl\na1xIR8tkpBTggcCg4KCS1rJOxcR1AkRtWqp556R2bBFs6OOpqT6JBH4vrVpj\niFg9YOS7w9M3kdC1pXzVUH1qNKVWBiZCO9qT2NK2lza63YvJ1rcUg1ZTqmud\nCmyt016bKIphDUc1myzzwttk9ntXIfchyWIYMlwNwGmejYPZ/lXhgPmD9Ebs\nPIu+WfjaS4+7tQJASop+hGcSvRO85Fs8jf4YlRpzX5IX4UPBCDm50X/c71D9\n1S85BL/uCBT1vVILwyrasa3Hy1133n6lw6cb+NYLnySicMk3bxz9DmpvDOtj\ny+hCGGRCGCbMzFVuSUoY6H7pqHXuIm0TWWC72mSa2tn2Ti2OAYsCJSZzIh2h\n2N7X7eAVUYjYtZSUqlK7t4iO+yc+Id5kTGloJlCUqO/e99O3ja9Mnqo7t083\nvYVf\r\n=xtOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM7qQ5SBZ5PM2xXF/6a/H6Ka+jXp3ov+v0DPFKLHaikAIgMWawlnrLtbA256mLomUkOhNT5pbGXLseyCKa7YQSthY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0e92782b.0_1618324892336_0.9605155798399578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.70b3a072.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-X3nxuM08Dm+ym3Flh9G8C7njikNVE6QkvZ1DA8J0KC85RiwizIIlfM48H20gk8dVg3pi71VH5gc2kGNbwvEGMg==","shasum":"a30e68f53f519a789f28a87c19f6f77f4c2dd078","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2v3CRA9TVsSAnZWagAArl0P/3m9Y87oGffIAlczyjMn\ng/IjpThjtrc3W27tgk7FcXio8wu+11ISATh2kfzmeCSsxhs4gP/TZyXPP6ge\nZmdxzq1OtihPMavmwPbZfAXxSVi0u0fMvYqK0nt+Roq+oYk9ZCEx5nbYUT6p\njgAtdt9hGrik6gb2l+EKVoV2elcu1aE3XO+asVMcX04cxRZEjao7CzgGpxyc\nIHMJ4BdAb8L/bdZwtRaE00BIHrFBcxyxWHfVj00uwj5CrqFboGHJUx/44j32\nOxUV4fFupbikbmps/pbHXYIB2yDy/q2lfQjSv9Hhk8bYfrC0zqXxgdYnfXpx\nPJ6xsOCmAkaX8o90BjG59OJ59lx6Hs/bPLOIUzP/AARBLwGDCb/MTMCeRT0m\nnh/4y5BDgGQLpypXAWgY9LL+PrRFBKFMFwMTGQMAT6Awrshvrj1m63C4xCzq\n+1izO363lpfMilJofIX8ql8hXPDZ4cxS41nzb9qOwZ80wZY1S3BbjspaJRiS\njyIMZPYffn3R0ThTszaGiWPoHZE3rOPalH5K3m7MhmPMUIxMCYYySVmYK+LQ\nwy6vr6hiZg7okA0GAEYqdKV2GkhiTl2ooHtMQze3rb0ReoGUwb2mOO6CPqKV\ncUj1JNQOwgVu24A0hK/aVx3kow0IIRZMtLMrR8pn8MIn0PPRH41pgTmWsrnA\ndST6\r\n=vLWC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWvPXm+DHj8pC9QN3/DBWTSW9+SqHHZL1IZ60567NoTAIhALmXKVNzxpoK0liDsNR2zTt0CXMr4sKNe6OtUJO24AHD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.70b3a072.0_1618439159016_0.03773254124352432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.ff79b092.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D2R5DoeJP0HD87ounKcruXPFCPSzRmQRGHz2yFWX6et56W6DU95xUKmYZxbzvaG+50Sz4ajoXjV57EE2rxlmxQ==","shasum":"af636716a4a2630ef987e64fc3755bc8950984f5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0XCRA9TVsSAnZWagAAvf8P+gIwQLBeXDkhyBNPItLJ\n9D5oy4Eo5Ax2YPyAU+gxGeWBehAz61VO0K4rohAhu00s8ywumxRIM1ZfBzAx\nOfdehdpgmqyPNIAkQ0O6kWpO7kGxfIMuZu076bQsiJQlB0I/4sAWd/66XeG8\n0slBkA3+Jhphuj3mCDk4uICY1Y3PvhQYblQb++rpnloiw6+tlQDkuEbXk/lQ\nYdhVZGAWTBMo9rI4cmqkzkNilAi2RabAkSAPnGZe1UWtwHWGJEmO3yrvKqCb\nMilKSuSpDcmWCnysDO/SuiCcRHC1HX+VvQSbCyaSrzl+o493lUX0h+ZFym2D\nqR0UK1VjmeWJZ5I33IAWAH9oHkbnAxCCGqZ+RHKcbIykBYZu4bzjLb/hT/oP\nU4VluKL5Ha2u+qvjuJMnPkmIOJqm7lkJde0weENJQP1mkWEssvD1jwG5bvqE\nw/2GlNRkXLGm8lPServL7FeWXefmrfGODeTV3TIe0KV3xeJr3j+F0EvYvprc\nYjyIhbO3TcmB4lMGHiI6xfZj0NhY+BkRrZ/ZZP4sBwRAAkOwhkyZSN/Jv4aN\nU7UuUOswLDGjce7C7x7iUNKeBbm7JBMca5QMUz9g1RcyPIVA+unEZyyoQ0SH\nLAfh1XncSPHhBBGjic6LcloWEwKO9B/ZX26FndCRbSbYL+opBb4kQtPdhrvz\njylv\r\n=cAag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGM72i39JRygKVU+NQKrmkQxszeY9buGV/wTIKCmhyGUAiEAwRb4WfFQ0IBaTT6Mqe8Fd6N3wWQRES8iBaHu6fFy88g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.ff79b092.0_1618513175158_0.8836549869832946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vC6fWbsb7BSiXGDBxKH+WRXtIyjCKZ7bajdkNhDdMnKqK3W63GY9C7ikg5F9BTk2ik7xlcFptM0YU8ld2+9sfw==","shasum":"b76068777cee4d59b69b104f0a3ca250110d9bde","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+NCRA9TVsSAnZWagAAVWIP/RtcNIkDge/DliXWksbs\ndOylmWs9ufe+vhvEZ3yW2Xa1+YMxzlRgXZcrr97NK1kQWJPMk3TZ1ZMAnYo1\nAs09YqERO7cJYXr8sOVHEDFwYDNS1yH+HKwVpXMw5XOuKlS9JwrLcbLHIXho\nc+QffB6p62P9zME8Ayhd21htPUJNWK34L0GThYLLzfVyd0yxY03vJquQnhu6\nR32p9gIwScTlVxBbkzEVdYjg2CjbGsy4qVsaTPDrGP8MFtntkFqGcrS8kq5y\no3TCxyjwP5c61qAv3tXMw6GrEFRUcyHqOefZOC4clohZPJd9PTI0EZOX8/kX\nIPzJMFcLJLHDybe2xF0mD9RLcooNIui6PMp3/wqxdVSmv67XKspCMoen7pog\nTxOGpYazXsZO6uDLV0P6SEem0VGUdMgNwS3PT+n9LAkbnZvM0HIvf8/d0bKk\nJd7lcYaa/el2Ins/vis+mlrz63/3thi8Ms58yiK1uhrWqaNjd8ncQiHOdsmv\n8k3vGY6ZZss5Fs3mLR3U9br9tQUOYId5ZsjXY/eiLx9G1lAuZ9HzsoVEGFTL\nMV2JbTEonHmvsyBNmGNFdX65tNeSE411egk+sLipg9+TpSIPYvBDMgnz2t8d\nwFcCTkcJ34L5Ovm4TgKXIaEqR58AwQHSKJxf29+JtyTui68ibU98ZSadh7z0\nrNWX\r\n=Am8T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDEX7cIkkik+bPMgO01LeUg9Q57/oqGbEtQgoRsPS+JAIgOLd/9c64xtQz76fUgxdQbw57D1g8Gpp3Nz45ficQqQc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.f35b2fd7.0_1618513804962_0.6127756519446559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.11977cac.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NedKXv6UH6Ud2Qf0+OfG/x9EX/Rv+BDLZc8B7KzFHUfl+jjlLLbpye8pSiIpPJ27evt0MKPyHf/PV9Ogl7FNdA==","shasum":"719eef973baa18ce32e77a4d4001345da3821f95","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEMCRA9TVsSAnZWagAAvjAQAI6h2Y0Xu41kSG6rgGiY\njTBYxxg1cZ95xowKDximsrpMYFtQjWSCux5kByGBKT8WP6KtHokDziPRMnO2\nK5Mys27qf0tBbXLy6UrqhyHllwe6Kx2FC8u1TnNXkvMXm5CO4qcRIrfvReSs\nupEL8L+Ll/FZfs6r8fxTBWW9nfTBGzo8OQGLV07hJ5T3RKWxzp6omFDGnjMN\nV0rA2SC/sgtB7AU4ib5367wCS7610LmjQ9pCerF4x9v0REUxEqkZhDxHWUbp\na0Ke/ExA8+GAbK9Z0ZPv9h/ZgyIaNCpO4SHNQrm0KJMF9Jw2GWw1nDNyLHZA\nnThWsVleG5fbULFmhHNdwYPcc7Sk6LmQ/WWZrhJlcL6Z2teY/hxHqIk+ALoc\nq+eT5CRMIyd/ith2b4wFdJtGSG7uAMsDKbPOxfrUbES5jwcKAz1l2X2FF2Pe\nYyqStLZfPiyoT6SIuKiServMuaQsAS/rQWJksspWbLxqC0LmbB8hWuDYklfS\nZgb95uvXlIXu+dGx7501xDyLTONDa1Jtp3Rbc/vG3/Y1EvpNj/9hZ3iKwPts\nDpWlFJ0EvU0l2iTZanbzyrbR6n2Z+KKsZsp0yikV0wFI444uD5xT2nrGnskL\nWtaaDS3S5GxBzdmmYnSKUr3X4DfhazEjk4Gsr7pLX+ZelmEHcfJTVlav+f50\nq20Z\r\n=7tME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTDhQboqVNNxweHP8cOLMq+y6IqAEYDedbMDyIaUJDpAiEAv13yH/IUwnMTfVsQmc+LxiNm4MSjuUXDHhr6hRrNzlQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.11977cac.0_1618534667737_0.3965040533720938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.018ff45e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YCO0T7LfaoqibWAtozje32uGV+5lpYI/ogy6JphyFtV9jQdSUmPl9d8sI5F3v4k41/i9BJn1lwWicqAde2m5dg==","shasum":"40ace9e2c029376195b525b81bb72f85a185a877","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3DCRA9TVsSAnZWagAAdmwQAJT1i5GnE7uipmjdyLBz\nkvKlteYBIsf60siSR2qGi/s3cksfMmdisl6jlRRWsbP9D1zcQBNmK6tWED5y\nyYXYuOZwZhcOqWoXNNOW9FpmZcoOEgmU6w+ap51A//Cn5mBl62VL4sCtr99n\n00Y7+AtWvC7PLDJHTCbWUMeiCURScWgkKT+0k0OH/Qxa2HtBXUS++g2s1R0y\n3axlko8aJTbL6SbfWWe7TRd1qjO20VHdQmKIHNQT35FvRY0GJJAD1CaFFITv\n1CVPBQUqnpGTi094mPhulWyVd+6uBnH5950H+a5gis1J4Sy6+vC2YU2tF1tR\n+c1zHHd9iKF1O9cw8u5vil+sUGmucfho76E31UliofyhY8i1LppJ9/t0o7/P\nV+0A1Cu9nZbhocba4ZUdEADqytomSIO9YaFajLGZKo6an0JmpjABpA0xnhub\nfO2HYT8hCbdXAR8GjzjrOiIGuImVIoWA8mZc9ArODsb0vL6gnNLMPi6B+6SY\n5Y1pSzkU55tO9H29GYTkpi6Qv8KA3sSuA9ig9jrl4UQVUwggbw30I0j1BZE2\nHzh4uDFH/jhNhyM/a/w7faiwdp3f+CkPegTMMVURP1GsCq9w5Vjf14nuB1+P\n4iKxsRk1fwJ8nVwiWq6CGarUrh69zRrkMnCZUWC6FXgRxwD9Ll3mBzitPhUu\nuhlz\r\n=2pdD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1jQwfBA+8Cyu/b1LIhwf+iEYatnjtG5xkfgrocy6Y9AiEAmsxH/eCX549++eHlaV94cYmtP9J5GAsS/N0+73psfW8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.018ff45e.0_1619131842640_0.4595046468484185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CLZ2NJ7GW5fr5wPeV+NaAlW/6ifStRS7Whh223v2In5QL+JWeNbPCp/cqVsZLSwACPD0dzeUz0QshHKhAwpJmw==","shasum":"5bd500937f0e413da74160a3476769d9bd90cb41","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiMCRA9TVsSAnZWagAALqUP/jZr06zGW/vYJt9mFff2\nyDtSjuFO66/8X0wzyN19a7iXagieyMHO7H7uZRu+VGBhjKDwJT64NbbU3HVq\nfqTuUA/eczRT/wmbcXwuoRI3/bNJcBVmfQaxzT2OrzfaHKtWEg+c/dnSxBkD\naqAL1AZ5Wgg1QTcGO5FmzkUhLrRwb+rbG48yUTfsIfvo+9hAOugVzwwZTzQL\naci1Y984Zel88U2X7A1SlXj2fIJm+hJQfb5cHuQdwASd4r3crnOvRW6tM1r+\n/RiOwBkZFAnjzORT7FnOziSVVK79MymE9V6SNr6nXK+eCGGwd2V3pR/j2DPg\ntG/SC50u4EwWAAdzAsescw9U6ikc1sF+8yGkk3pqMNGMOynUleGcixtsZtsP\nS3gd/uTA7J3Gj09fQg0wQHPOuZ5jMKrH0d2JktaGANhZNuXzJkGEncwupYw4\n8zBnA4cYyAcfYg35utGN6oisZ1lLCmlDt1oxF+6dDlpOcrslpXuihH6tfoZi\naYJKTsZzFRit6gSsU4YPkFYuKte8RGhel1FgzwZdwhwDLkTf4Ron+X01RNrE\n7hKnZh45Ipfh3qPNUjTp2QoehGv+Jp27i7E7UkpgUU1V3ro8Pj48wJiHuhUq\nAs8Qf9GnMQLVWw47LA9hn5uF0XRzfxQIrodAZUR2gIGi0RKTrY76U0Bd3xJI\nSJu5\r\n=d/0K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvCQOoeJLZEjtUd3lsjgLIMrJBkldM2qFPhlcCAhWGgwIhAOUZmFX8ijSj4UAfRRfOjOL3EJZZ1/gqVUWefn78ral+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.c99d1fa5.0_1619466379870_0.10346153580985917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.eea9b304.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ONkm2+4RYflzo8x3oMkqv/W/OGz0iciFjgRq0mMazorDB0/MOwcW9s0uDKSmVgWJgtHLsDGyKsiIjq2HEYGDhw==","shasum":"96de904be8b5dcf40e132a39f8642b4d8ffc5883","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXECRA9TVsSAnZWagAAywEP+gKX/AFOATaHeL4XlcOk\nJ9kiFY2fQ7wCudel52lqmYpgPrhrNqSSETuZspNAQdJTBsIZwfAjnSOo04+1\ndgvnlzBbPZxg8+vxpS9BXNNJ21LIBxDEe6TiV2SXod60LQ6KOM/J4tuJDfhw\nuXNx8WcYyTWSchpXx6mctsgvpnBgDXRfo+L4nc19doWe6dWor0SRCXd+SiEr\nYBpposPIurD1gjqwgFc6+V+LKkj0Ap+SJHXdahZNdW74YBR8EnooBtZWilmf\ntL53Llx9nh8fXOl+dlH4bJFxw8+IhpM+XJbqIXKmkSbF9Z5frJi5ShGDjKhi\nJ4JSiZpafktaajydIgK3YnEpLbFJ0JRTEwYT4T1VhfpbIsPqH7g+zXDBEk3A\n5+D0EwNTFmFWZjhHRMMgDQ2DabrQ45c+bYD53S1K0lbI8tCdbKmgdIMSKodB\nsaxHrI7azl0ZRSIHSEXYTN0zPLeasZ4C29SuB/TnkTEBu8n1I7iCJx8rMI/N\nHbe+R5ojdVQInMl89haJkl5dCYgn63AYCEsmyj6XodTgE4omvBwQ3XAyJvme\nu9yFDO8DYTXu2pJKKWivmZ5KpKxx+7gGkqWXCdr8L1Jw/l8d+AvYWZTLOYzZ\nSZztI+ZWHrwU2BWp9KqMqjaDopXtlFn0zk63D8LC54T1z+pWR4dkI3RTk2vJ\n7c6h\r\n=3rEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8M4/uYDRALEO7exlACwJIT3qS22LP2yaRPa3njMx48wIgDgUF3+8WR/vRqAHzaj46rSqKISITiU7uAvyXS7kMjwo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.eea9b304.0_1619563971746_0.088456438797623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C/55pcW/Ikuou9ZmD9ysMtGIusMAsuFa55k7bz/Jl2leW9kZLeh6+5pcwBzNLKrKlxBmz1JHVW43CsI0fnNjmA==","shasum":"59448299dc9b6d422e8ed8714f2e8e4f8584c3b9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKenCRA9TVsSAnZWagAAFxEP/0fYjUDoXlYg7UF01L7M\nzVdIXiyxWMTLcS6iruFXcTXEJk4PL3hV+74EEdH3zf/BfESxbTG0NYuQB3mQ\nWt3MUa0XXQbt6gVqx9GkLbmmiyL+Ie7nqSq0mAewNR88sUj/3yHAZFIaQBon\nYCP3Be1zvD7LMuZSKWnr+nQ5ZqhXPev/sEEi2MNc9sAtpVytqAAHAuzQgMKv\nC+wJZp6krgrWiRmqlCR35DsZ3/Np3cSAK9TuQdCnjlu31bPsj9Ef71Lfg14t\nolMqjJcBE61MBcLUjV1+yAWRh5uLK4fBUoMFKUwltBNg7zi49jVTxrQe4qo6\n5LO6tHci+2ym8LSN0qIPDLp275Lt/GIBSUwbE/8/5V8h6CMM7ZKGSY5euZTF\ntGd3cbcrX7GcrxB9UaQr/+wDHJsyHv6qY3c9j3a+Pesfgids3Nl5FYRbdzzf\n6fCiRiG1Gx9PuG4aFYldcAhvgo4buDcM1PAnKZ3ROnpz23IUA5pEMz9cNfYO\ndykV+DrzkNK8CtuhCjooCG+gJf2BEoVx35gnl97obMhHi9MjWyvenQPkxTh+\nPGNlGUBJ8Zy1Wud5SLftlxYpIkuhiDdED2nfE2Y2ez3fQbuOeY7sedcRDDMB\nXRDlJEP9tdcr3q4h9Lz2+tpClYa8YbOPOE8Daksc4YxYQNqt/VlaQZQG4oHn\nSOIk\r\n=0rsT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGM7NQiHfLqmQTdffSniiI2KvMBqVrjfNKNXs3LMgMPAiEAv4ODbj5BKikYYNNkSPPpEPNBjyCxZKUlnOCdLs1ZXpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.5dd85d0c.0_1619568550872_0.7673890317975158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.cc813cff.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UwHV/IjXVNpb8igttKMQ6n2wNg8kccKd1FONiFjw905LeP0wBQSV878UjlD8G/EhP40nYYVTEZFMWXvlwaIGRA==","shasum":"00f5bdd69160b8ba8ec8ee657ea93ebae0633235","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRGCRA9TVsSAnZWagAAmugQAIpQtsRFeQu5FpjSglLj\ntdsEWpQcr92t7u2j9SDh/PPoodl0IHRmhAf0HLtHcuPsxlO9EKB6f1OnBWq9\ncmUfnmAH/6l414P35ICuAiPpSSE6+6TlPB6sG8pIqg0cNgIeQl3k4FhThH9q\nppNA9w5HIlNzU/RHXB7JOeiiXmQ5LLOVzj7l5LcsqiruTYQwtdx7Gs9q8W/U\nLBUu5Hv81nBjb9kzfjZT00uwFg/uCZLc5tpgRXIgYQmqwpodempHOUgXLzgj\nSTbv0WYJZZH+5iYoe1Xt0qxMSQr0f7Mjao5s6shhsQ39ByD/S5+HN+4pfBEW\nqdSbCs1XEXa3JhLZWvHWU/XObMG6DGavWlbWKLkrWmD5WIK7MRgfpEkS/5jC\ndbp+/VRdsLZgkCNm+30k4EuOOPF7zHvrYhYYUjKxiUH5I6Emn8w6k11w43xo\n5uWorisJeRQn7mgjIEgtkc1u+setzAmQspa49v2DyvUr1eNqh9pf+stE3WNt\n+9tTwsjGgrj88Kw1Njq4wXWs194gaMWuaJC/rcpJ/KBTTow9LjKNJjym6Z4i\nfeOXiHjy+GlHSZ0xwIcg7zl5v+Ti1E+gQW7ScJCl0oC/jw8pRKDcCpmRc5DE\nB/WM5REBCWpqk1mc/DA3ZVdVGUsa43c7K9/C8DnsXCyuZerVWHtotGseu5fQ\nMO4+\r\n=Lbp1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQh/36jtaydekCKX2wQ8vZkvKue5sUK//jObf62g4qeQIgFXz/H8INZx2d+XV8KrqN30srsJsdZY7cHRPgnKJDgTg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.cc813cff.0_1619817542001_0.6330655090742894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-slider","version":"0.21.0-canary.0875e898.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nw9lHR8IwmdzmouwgaM5ID1EwDaw/VfysdHdhXmn2Zqalp7HCKMqXVWkX8Jch2Aq53OV0yYSRDKXy8U50NcvXg==","shasum":"691b0c0034b41980d29b8e9fa3ef223c2942e2f6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYtCRA9TVsSAnZWagAAOE4P/RhibCgTikhxgQOEAHgn\nkj6ddHKDhcwsghoBotQQiSNkfd9kBbO5ydm60bbVyy5nRYZmMhZt10NdYqgC\nFFVekSgmol8GG2k3eKuhgVrUklpn6UnRvyj6hCVT8QfeSJrPE9NDeCu2GjzR\nnmmSXweSHfVP4RmVSnYIom+VG9sY85LN5BvXkUekQnKFO8I/TwWmwCG6zzqZ\nPAhadBkDNYSBNVskYFJbhzHpYZkcrFlRphMYYfmKs4ZPuDuF8MGx2nyqELHy\nXdiGAp1EFHqNX6T0Uu3kDW3rCCnkdysaZ/3yLGdGKcklt4CYCr+yuRFPL1ws\nve+Pq5l6a7wFvVB4p8aXOjHuvM5+RLuBJIT5QZuWUkw94s4EqoVTnltPUQV2\nkqG5j2GUhaBSsD9owyb1QpWkh4QQvs9aHg+rwYKX7iiORL/QDGoKIkQg5Ln4\n4hVtSlHUcPwIc7NAPcmcUc5171IzFE3HtQ9VOkblqqqH32ehHmA/jSetTLQy\nE+xBv22qo3QFjaU2CAF3U/zrlTWsb7L4NfjrPm3xQ8/st3b5F42rl9fvEk1B\nYUQnKYkHX7Klb+KLZeoqthxUBfTnFyngmjnFcFXsDUPnvkLwx/atbPy7xyE/\n0BCUFKHqo8p/2lUBakEq8mMowEtOqpNPbMdX29xlnd9R9Gabz+ejAMXn7FsX\ndv4t\r\n=0mWJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwpAAF0R0tDjqYp/WojnVmq6iK5PyPdnvqOmozGN4a9wIhANzD8ZT3D7Oy0xs+fC0UhI1rVfN4oeM9TmkyunhhMGaF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0-canary.0875e898.0_1619818028696_0.7835644916464686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-slider","version":"0.21.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-VDcYWrYE+vPklY3AWidw38yozCGXl3HDZwH1EttBJIxZSqvh4d5Cci7HvAgRYPEZF+2ODZXOFNBk2k2CkmyDvQ==","shasum":"5c267b8e49df832308e5a26507922adf982b1b39","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.21.0.tgz","fileCount":13,"unpackedSize":67776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmKCRA9TVsSAnZWagAAxX4QAKKp1yDGr5+bF+y8O7f6\n2uM/bJ3Xj5pkWaNUj0ON9DarEp3tg/I20GwaIyFxgnJAQDW8CqbXztimPLI+\n9RmBS0qgD/MtWhAd6Scew4Ua48Jp8OOtLRi47SW+z9e1cESwsILRsYQjbQ8x\nx40sT71ypL9XS4HrPhnSIbUBMeRLDQDoJ3UruHehWKBBekQNS1g7GUzOqArI\nFtwkgcAGTcRDkiGf1s+LE2K3ENiGWjM+ukSEwv6CfWixwaxapMMytMQaeUkn\n93iLCO7SOjAQ4z7p6UtKELmeqRobTUHJsFvDvCCboIHz6vdy66Lllrn7orIN\nWxLc+gPdgrffwhFhM7vVeGJFMJaI+s1BUh7Al26cUIinCznrpt3lmcaI/IZY\nU4Lseji9H8qXFVuapjLrjpImgxZb7yQQJReZOWnk7KidTPoScK6WKa3habUR\nYAHFan+ELFO2dP1/m0xqxzK/qdkZxrhpT7JPZ00fWb4gA6/LJx1E0wpQ94hC\n8MazXHDisMvJ9zFA7/ckWYQ4EHDwNenkKC2o4CdpYRsXdykQezVvpBrnooXk\ntMzhZ5qDvVFwDGXvjfMUv9Qi/MbtgIiOjdgrJ4PMB3xVuRjrovKmdbdcCKsL\npe7CNbnnZB0phbiHGVnXwxe7l+UK473MSSpSWcVA1Mziik1eBGyoSBAEikZa\n6kVy\r\n=wEXX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfUyEd0LLjqWLCA6dRwPYFB6qf7/nl2u4WEBIVCAVNiwIhAMflUuYVkLqEAcx51YGb2vDJjjfNA/57XWF5GDflHhqS"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.21.0_1619827082081_0.039046545602613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MlJYpX2I7bKH32ptFJXQfC9rvYq2v7nR4ukPsoDmRy/RA1DdUNCWvD9YHyiPSepnEKCZ9fB8bKAH7pAwPeDBSQ==","shasum":"2beabc4c5fe482f98061bddfa52e96d9e9d59523","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJsrCRA9TVsSAnZWagAAmHMP/0ImcPKaefzdzZHDX+bf\no5n+M4mVBH5mztRk3xK0IUDwbwMR4H+5E1q009y0LvH9ozqO8AQCPMCvS700\ncQ0YWoEM6SPi0WPRWivn9W7qDs3UxWgrbNkCsgOxiWDetc3caEqHliJwq78c\ncY18IW4dSwIzJh3j2woeEVZzEgT/a471pJ4P9sMxCFv7+lUtd6NsE0V+vfNK\nbmKkpfWmWxltI9Q7DLp/evhg00U/0rg7kxmcx2q2Gbj3EuAfl/NkmrZWuPEl\nXsWcgOf4YnPOEACyARG4ehng5zt4XaeI9XOEj2cQVKMf6OrjK5hZGcr7Xs6U\n3JQ4ve0Zs9xWaqgONpvEKvBEstFXQFx8BGnV2x57hXPElO+fcQdxP8V+r39D\n8+T/jSoF31eFyoV71TmKgtoTXRPxwmM6lFfMG9zfQSIEZ6hcx8j917xIjNAM\nVwm5nQj7JTLiWxaEoR1JWSWCQBsaOTSEFQFI6BCLPZVlfT5yttYz01ppz6UL\nb15ORE68pZZp2u600NsU71ZCNpHGnSP4rPYy+v1xJQRMpb7hpcEIYUBfqbTu\n/Y7BEicY28Qs8Ivs8i2doC5ZMHXoKNY2FNNB7di1lrWtY4HzalkN+C5Y4rDy\nFxbS/1Xge7m2pxtNQx+yd6nLbEYliaU5D9d8G649foVW4FDny3FFI4MwuNe5\nkOst\r\n=XfZn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC71yvMR4rt5T/W1N8j35A8dPDVEqb+fu5Qths0KJIQowIgcUbZk4D237ZqBKCF6d13qbAf/vUw5v7Z4mqqoiMflHQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.8f1e7e1b.0_1619827499040_0.8978224653074864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.deb0e792.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mOnV0KeM8RGNRk9hhWtAFvJMmVnG/Oasp0K/Ufq+j6t2zgwNwje8WIouDRzRfjObPT+yY2H1PPdtAoq7ehd64A==","shasum":"b0e27cc38089cba01ebcf465464232a95b6937e1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxDCRA9TVsSAnZWagAADf4P/Rrst4pEVjHNVhRkbuPN\nMx7L96zj/UUED8e5kZzVIdpwBONshkF2jzDmcuBOxsHSsapz69wVL6As9lZL\nlocREfT2cJABA6Nn5rQAs3EOIWZHj7h6tI1/1bWOpG6bFNPckMorbo6eEVXS\nVzwoBjXDTtGgH3jc9akXcrxZ16rZQhY3gVAMdz+59EwjxkAm5pS50LDakynO\nu3aAis4aGYgIF2nOz5e7NmRoVnf/jRPa6Nn4vO6K4OAqZ6iABVTd450X1tTX\nEltf1myxZzOxL9S+259VP4ypPbjSQ9xCe0uhUzorFScW2d+5pRN+iItzQWp/\nK/riUTjDfUzx/nTftJ1SnNEWAhqqi+YEG0pt9BAYHCmeBwJMJV6sC6bc4Um4\nKti4zNfrjqcFDt8FXiKJ+7Ps4Bydz0vcmeeGg7+IwtE4qleyHQgGOiYYYFSZ\nAqcytpr85jymYQ+gKrWrxHIL7EoQuA9B3y5i8qCW6vtWHC8MvHocUx18mOjY\nuJCe0WPxD1VWjZQp75fsceOJKNyKZ50lOqPQdaiDMisxO0IBBhBbvH/ViFLf\nYQ41NsYQFEUGMNcFBXfvb3UPCM8OzSht2Or29beePIlBaWdgI4oVHIjBkmCw\nXzSM47Vh9K50X0epkFMeZzOViv0raMBOvPZZC5fxtabKJ8tpAZV0uCEIai9S\nmAFP\r\n=X6Gv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV7SSm+3gnNSAs6KxDuo7FH8lmq/UwaoKgJfiQL7xY0gIgS2f7emWQ+Iq6/a/dAymadIOewYmxxayRkIIMPsH70Y0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.deb0e792.0_1620077634827_0.5589917349852815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.a3ff615f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AWZfBD8k7o+NfZafm9xAn+3dP/bdX9kBPDrJMxMmqJXPDagi9HnHOVbuQmniiyUpKCuhKlT2cy6DvcJwy5kZag==","shasum":"0870663d4f078408116d3329c14e10890174d261","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHovCRA9TVsSAnZWagAAi+QP/2jEeL84mGUzG8/1Mur9\nmACLRgm05smCHbHRqAvGmi8wkOzu5BJZNkkgmiWKvP7sKBxhv1IhKnp8JEwt\nxvr7d3g59lhcxXZenU9yKy6RF4LUGS2KXIzwkfo+EeTqy/xe2Sxj/yQFOfwc\nyKccYG2HniZCb3e2Rk9ShNxMzpM9ZiSBF7HjzUUycVWj094xvQCwxldv0KmV\n1QzqX1lda8IcLKrduQ3jv7F7bi2YBY9Bx+CrXztR7wPeNFl4BYYc8CEfmwC7\nBjXn/vNn94G2yzpsBtb+krJJ1D2QJyPiJYh6JxszepW4n0HhxjOs45oWkS4H\nUzeCVk8XEpTc4OXQ05qsKCOnKabEHL9F6JPFCRfnJm0eMd9KsvuKGcNdrckc\ncs4C5+XWNR7WeL5eIeRPTO43xF9JSQi1VhhoNTiMsqFKSRXmcuxijZQbO76u\nE2FPPFn5uwPbjUi510z9kadzwp9yBfop5PR0AirgrmFNzLxVneC609WtzYKf\nbduRpfYagTKnAcj5I9JSLP0otUCqz3cT+rhcVnXsmRi2UHjDpO1UGOLpaRIP\nFkowTSVSaOs7Otwrpm4V+CGLH1hjn731GqGaURJ8zndqfWxK4F1tBCcxSVAs\n+l0/ApkVHG5oYJpI9Q7EwaZ76S1w3j3JxQEp4kAdvAozgB9QZJryiYQ3Wbyj\nYr88\r\n=wztL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbKqeZh7BoEYqa7Ii+ASgA0SXSYiU+AndBqniGzT16hAiBbf45cf5MF/paRjpJ5IzdCt2FfarLETccGkaTQMma8TQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.a3ff615f.0_1620081199575_0.27451121006001955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.948ccfb5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I1XaWW2qKrPQFz5H4QT6eqN+dMvUQx8HMAaYlWdx1tr3GCvOMhQRPApkzGp9Ep2Sfh5MlQYvI1utv6gekuAVrw==","shasum":"0285b9e0040a2d633b67c6c2e2f1a6ce534389cc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDuCRA9TVsSAnZWagAABDMP/iwIuGIFiTjkBlz+OI/1\nFOP7yB8CxdWSTq7IHpLRfeASiPdEX2AUmAm+ruQlLR5MrVdWsqG829JKg2fP\ndNhRNt6y+j5jXbjFJyitIH3rFuimoaIu/c3ik3INsi2k3t+aXIEB57vUYfJE\nJrJEcMKBS9496DGlEC57iPLWUU0Xyv4q8Yp6/mVdoDHMbOi2ykpKhu+R7N+f\n8J/4WbzwW5wju87ggek59sp6TGr+waChat8Xwfb78iKatkn7sMuHg/GOBSzW\n7//wvapcdSaAnew4xEOLrKX4rmX5IZ5VGcg64gfuiBuQLF1nlQVAobkzprwa\nc8Rlm5/Jr8FnwlqeQj6CYttJLqrpGZfqM1ecHZOhpdXgXnw+1t4JkRLK63NZ\nBVi3y9+PCze95hoqalNikppIf3K9lKmMLYoakcLB9XVzc8iTWALTlX6USVb2\n5HRewAh1FzBftWetLc3qXdS6rKCEKhKEUP6RL/Gl0oBnUv6SBZJPAJmn8k/B\ncAZ0u1cAu8RqrfSqk/vXJGeXI3YxAAzhXJ4pnD5aRGKzz8sf0uAZW04DYq1f\nNB+VoApgRf0vf72XoEsVlIc9z9AWq8dIAKJTuV76k6Cm1x/DMYPYYzb8iQc+\nDThwf7lFU1DKrCkk4vLdeXWhe6nQ3aScZ7R+zSAnCtZtt5K7jszKrCQ/z7Ae\n7/Na\r\n=/cEe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVAdPNhu0HQ2xVHvSdkUo+gQH0K6nt+COdEkm9wsBKXwIhALGEn+loWeH6GR7M0S3OyXjymq5YQNVfslgYEeGOfB6I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.948ccfb5.0_1620087022089_0.39996508984291745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.9f8337d7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NleTz9WdtumvZ/P9aVDDwDdxtHMcifpWANl0GoSKXbFqCTx2G9PJNx1+St3OntHOhJB7se2xKb0dUVP14e0WWA==","shasum":"073cc5b44b232e8e00ae33c825a6629565f1135d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQ3CRA9TVsSAnZWagAAnPEQAJ0NIawGxvdFVv9jg7+2\nLaVilNIOZwt1CADKoprDRQxEbCVDG7O2IYh3ocSUO4uOz378prH0bu9UBwja\nDPtgEWk4NrbpG1QTsuTpaKPZ1AR7fklYhzJW7Rm3ubTw4Tmn9UmXMoygionl\n15uiY+9n1wuJcmZYC6hFAJ5O/XzyeQtqcXzXIDadskC/LfoJoB6ARvfemLLf\nA8pE/QzQHzUfY2eoOitpH2Ohvli59LiSq7IWQRz0caIcRBaVVK7tJJoYLp//\nAPe1KJDHfq23IYnfKCf/FeSDt9mLzm1dOuj4HSfAk8Q5aMCjP/NkjQReVTuk\nAs3MWw5yHOtVp93fhyF3a+ekx+PJlbFYi/QBkG2dA2eNGIetzWVVN0H2GP34\nxtSekFGWLxuHVXz3qHH+UULDhq0C8hUbg2HFALrnjy+wG2QhLbOpUaI7HipO\nkZfez03zpA5dG5f20eLOYbtAyi2Kc90YooXlvCM9yCrPaWZtxfMPXkFFUTcq\ngbeQ4oDtDUDnM00vgH1DxyeYfrs/WjA1AawhrQxoJQJjBfLNpEyV5xzh6TMU\nhpjgV01jLn3BmyR7rkk77yZqiyuQcARdV5rHRgXOM6ObtnNYeeyMjOeY5Pn0\nPYUW69TRdpKBcOOi5cIol135wq3F+Z3pa6vZG2BiFAyb1q1ixwmrmuScH5ys\nHl64\r\n=YwkR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7DP8gO3hQXcQKH6Ijl/sXY/7boezsPIKJs+h/jH3MHQIhAIjVrXPSWIMMCwQH3021nvVB4/YmaAEAS0Tyd+YOen12"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.9f8337d7.0_1620153399424_0.902064804181669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.5813480a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HgyYubcdxUR9B9eZhp1Qs9+sEipSEZws8hAJJZ/vxUpm76cnP/Kcbaj+YW+wPrAcd6WdEiv8+jW2OxPACNsEaA==","shasum":"29eee7261e8b98bba57a320c915c8e6491a60203","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuL/CRA9TVsSAnZWagAAjwoP/jVqvvt6UlW/FYIL8Kf5\ngj1y+pL1TTq+ZMCJq6krOVHqU3Zd+9T4/r051bcQSz/bNP2DYKWw1ZEm7Djr\nd6hrBdK5/oP/ePHGzUlLdWdrQdtqwkOas58bcNENpaG93wQ40YNwXio6Sm7P\noX1BLoE4ZhARhNAwq64GDg4lBftvjxG8VNCqC+iHQC2vIEpCy3TaxEJ6khDP\nQeUSTa0ZBCnF/fMNJ8KKBmus7FKvpndLL5628X5LZ34SySuLJzW3jG+PJrKH\nDGlF62cEh5wZPzr8dspwfYp+dlc9w8u6id+F3C/6x0Dz3s5PyE3ehmY8iYjo\nuZXMbAuNY658lhxRjsIcCL5U/k9wF0DoNfPLpPLqAnrT4Ja0e84J5B6uRqDW\n8oAQ1Yg8gwH+SY9FNoEavdIM78zlrHp5KUxcQWc4j8FxYud0V2xqWnqmbUeg\nLjHY7JclTR1I4tQHkVoYEkhw3RpADjR8XMOR3Hr+DF724RBB0pRPsZWau0O/\n0H5a5ORDrnlKcj5fBHBtAJPDzLShJLxuXx2zThrlzqzUV6K66iLA8ksEhdF8\nogYLtUCZb2WeI+1/2XdNWcfhv4Iu2/QrsU1VghnzwHlW9YoZpkBU+1Jllh+v\nx8AY4sDvTUNjlSLsbaCqr91CVW0BZFF5e3WInYi/H2zGV24SmXbsHTTyBkP9\naCFi\r\n=UM/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLOauyUKmhLyLTzoubEuvaRzkB3IFy12RuiWDeiOuJbgIhAJ1vB/Dhsaae94GLDscz8G2gt3lFZt3bViAVUJhXq5Cs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.5813480a.0_1620239102543_0.29082667958752917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nTA4rLNoD80X09HKht2DVacnjNEFedkZqVEdqWL+7AzbYjmvyjuvH/JPQvJ7+mRYfkDl7tGFrxOdlONN41pi1g==","shasum":"8fbfdbcd2df4e357a6d6ce81dcaadaebac8956d7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5ZCRA9TVsSAnZWagAAR80P/RIYqKoYFtiFXajBJY7g\nnRpc9c0hNXBLelUtWvarTkjegXSYl2eaxIpgq/ST5D5nqTCphOt5gcMCTsHt\ny4zhr/IureAaPui+pyhMGb62WnqxUgkTxqLQL2Qo84W677XYpd/JrbC9cN57\nz7EFgu1hSz9aT3iR7pSLZKEEimhq72UPTRfXoQ4HDlYk92s9ToGdpwtksBM3\nWgQ7sDSEppsNhV3gkvsrdGEdWtKPVod+vh7Hlk0jstnP7f7W4WZkmhkuHxAc\n3Umho7l4nFyZkL0k05V3cTwsVJ5B6oQicX3BVSLXsaNBnc5CsdBX2wEM6jRa\nGq6LHoyGD1i8W5iL1JHEwV1+VLnwVBB9PluiYoNkqneHFscSWQdKcxrgSknc\nQYRW2zQHL7mdsP9YMyKRPtLDNxmhF1JTb/SCdoqeUJ1eUe7BuCr5Wrd1SPoE\nXK+QuD7g3sPVaxAQayOwvKRYWYkk3mAzAyIu9fR9/aeaP94ynM1/77JycKHT\nP8qUKPC6wWBfPR9jmkr4WNItuMpque3TjpwDzTnOIg8cBSvPVIBEqBjr/bU8\njZXj64XuTbyO/1VHMNHgfbqX5aPzgb1LJm9CYdkSv/TPsVeuuNhosHhDS4RB\nslpq7nb2dDaVi8riOwVZEfZPSGdlffjNzvHKmw9EaYKnRdPQvsdw9spGUz6E\n9scl\r\n=HEql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASDn8Px6NkmdnPIOtD/Ytw+5VJ0pin5hG3YMOSKUMqwAiAXC7xlRhIDHBIWPBpuypjHUEugzyJaPjSILDL8ZhIeVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.ab7fc1bf.0_1620323928971_0.7811323769174632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.25693d60.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5+3Xl8wCgu089RwwXEprN5uK6PQXvfdPYKis4l9yauHJhCGlNNqG2UHdOlSI2UnnfIi+6r3EZjDex8Zz6Q+pag==","shasum":"263754e39ad5c36e7b1da2e8a256cfcbacd8230c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdbCRA9TVsSAnZWagAAX+QP/38r7yrfGroz3uM25cU4\nuZLHBLDB7wgn68MmK2gOjEiy9dBrAtg1kUcVdjCBgE/0lvjQhanwa7XmMqRC\naXbailg9Ln5JklT2Wp6AEc81GpMAnh77OCuDkCHLLVnx0wFVYIc0D9q53wFr\nvZp9ablpKPszvINbHTjYPYDf0UCHms8onJSslu34NW2EAEn+eTCXopDsUTJi\nsjTA3vU2HXhWw85QUeTqbFUFz5s8MFGViwTLkI8Z+nYldBkEe4mMjZPv4iBY\nvDYxoFRIovnTLwF0ZzJ/n2NEzY8aaCxqkcXLOzIPIhQPdMMOWVAhnYa1zmOn\nZWhcWti3PzidcJ5kY2fyTXE7HoLLbsyf02SVZmt6CoKKL9r3yeoPq4q2pe1p\nq/Dt75USJO35fM7Xb3TN2gdaVVQbK2q2h9TZ0aZisGryGhTpWIjoffH7YRcG\nuxr7fZ0YLadGuPzZrl89JNDu0hGh3hL6ZzHIiJgOsFS7CPgLb6H7L88uEni1\nw9fIZ7C1xsNbu561BFBkiKCq272nynfAZ5pkcLVC0sCBNboI047FLKi/wZ1Y\nAyryzKNtrjCOOPQagbLnL3+QiaFSsC1fhEqHUAM0MU6F3XuG9wuTkCq1daEv\n9OkiH/Pnn6E/7FbSV9eYhMBK1dx61qzMA4sR1tbTH8k17jF8sj/cSSSo8OS5\nrRwW\r\n=ATr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChlZm6TU69IL2y3ZW4EUwPLCDyGXZ9C/w23h360AGYQAIhAPPAYL8Fyr/ivYqVNzMfPbrPrgFuJz5jEn6mkEqqTGx+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.25693d60.0_1620424539128_0.8018039394180689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.c497962b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-64jsLgGFVvKFC9YEpuH66ZAEjbDg2S47KDiDsE7e6HMCZse5iLRZvrbXYX2B4WuhMBL1kc/eMh2X0WrCnYmwUA==","shasum":"6e46fecd8974512d7bd7dd3cb57b254d9f6a5bb9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbz2CRA9TVsSAnZWagAANuoQAIz5+jU95T9uOmblC8WS\nc1y9gpXyk/JdAEOujXnlBav7aAJxvu1xzVzOTgXDr2eL+6AVMgTIC7QFSdUN\nzLEq82qqviKmokDra1X+NXK7VKTj8/ZAFhRHwCKWCjzNczpail3UCzZZ/7fk\n+zts9MbzFgHjUTf8cv14vS+OqbuRxAOX9MpqFQEOkNhNSmqzt5gQEo0Zn6zE\nwyc852LvHy2m2+87FJErz4WXDg9grgrfPmJJdMsITyVYsSkZc2CUnk3ea8ma\npZ2Juoa4x+9R3Ma3QD2FkjM9QgEeJVBkmovRWBheeU1kgcICt/9ySt5TciPo\n2f/7TZ3nsRp/t1zHSKYUGkRRpsH+mwQwnUImpZFpY706JTEVoJUJ8y/VI5f0\nf8mH4reA916E80TRIiEubnIfbu+i4bksMRSIIGhXXzhRVOtmFy1b7vbl7PrW\nGAQDsozshwPaF/mdcN0aK98kr8swTbN21u8wsSY98PAWzwfAMZd1vXu/2bfW\necj5MZx+Oe1NHJ2eVjiFfNur/kZQ+BfYNxdI5xkL3JYdIpX+Ruh7TSCVPP+r\nZ4Uj6mdIUFAQp2IClekMptmk3uOa96d11RuvRnahHjDgxuqSRU2EJY5ElM2H\nGcWbQcoVrPDrXxSMbNHxPK2jCZvdjeA8vlvc3g1BLw/Y7uU9klGNTYMG22X1\neoz7\r\n=jC1R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMUvPDHqBolHwqLqLwxX8Atm5BIl+00BFgDmGTyudC2AiAIt42mpZbQUo19wpnd6V/H0Mg6aP0pdctgVWcqUPdjkw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.c497962b.0_1620425973668_0.582438089434052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.e300688e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uLgRcZ11JmeYr9plrRr3JywatTM9cunJi5x0B8uSxSwXMuT2Qx/l23TabvfVi0Dy4S/Is8tR9/8tX4SlmAxMig==","shasum":"ed2c71925482f8421eecd33703d8145fc8e735b8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":67811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4BCRA9TVsSAnZWagAAf1oP/R08BXSLN2iTzFdth6ez\nl5ETzMEOVz5gvoMEkPbl+uWmZYHMtZSKteLh9rvUEJgnqTItkoSDuDLDzmjF\nk5t7fKs/fOZJJIPLExOY8shAEmghKF+Ir6G04F7yK5JThs76cMMXIiVQgm5n\nMBVnEdV3fBNzydz2arolJR7KPtzjOquDbPOZXISwqpycnUOyet94DWD3tNju\n+MEkIoZM8Ky6csrdduP8SrX7olIdp4oQSFxgPKMe7SFM8215Q/XTPyV2glmE\nFn9mU6E8SCZiO7ALstVgxsxo0KUlZJ+65GMSuVdojRs7wHJv4Ob3Vn+dJC97\nOMizph1zbY7OP1EP0Bj4PBIETDi4YOr9duv0D/N95P6vPbbto1M7x7HccmPP\nVnHhCGbvbYp91k7CIoKuKbO6vYFtNK9NY50/En37OQ6F6XlMSegTF/CD8O+t\n3OLN98jq+ItI1Ola/qFj1tKCwpwdIhO4NyjHMUBtVfBCxbOGG7cqCwVj0x6Y\nEcQEvVgx7FSbnKAZUJhNbII0f4TW6wjYl7C/qvunoY/dUzw+hFkTOkFUb9eP\n2JeLfMSX1BR32A97kC51OaBHiocnrOI2V+Vg/tykyogxrKhCTWn1URH0UC72\njnJ8yFeOtOdZPiKY7DNR6Hg7gP3OCLYDK6T4fTiCmbpvLXpfgwIuMEOlk5Ns\nTTgr\r\n=QikU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCORfT2la6LTvOE1cSgGGzpcp2q05ivxhp7EIkBCZ0/7gIhAJET5FwVmBLJg3iHTNe4jZGvOzTWguszN/0HrYxH0lMF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.e300688e.0_1620426240621_0.08043861056042712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.d70287f2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pg6C1D8+5ofNaSEqEqaaFGjaaOaEYvPMPHWBIeZAIOxnX0/TlEYw08AgQ//IN3ky1hZGbRypBRRIgJ5tlSkZOw==","shasum":"6dd7eadc80e3767bc7c076b7583b4fe475578676","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYl1CRA9TVsSAnZWagAARJAP/2d1rQHL1z522b9NE0zA\n49V9kfL6LL3XdpuqUoKsziHXA5LIvQ0wcsBRFqsunO2D69pqEFYjuymH0z53\nDlWkIGso60UXjn+GOPXhCAaQKwXl9524Q9HFKVj95sc5qL+Cej/5ScdzZgqK\nx1b9Vi9vVJOT8SmIQz17OZ62IT84xnB/5v921cjGn5JeWAIST5y870+p+bmV\n1wYs5GHUbn5btf9HOv7k8CnXalTeDQw4max3aCI/XYHMLeyTg3My6kC7oe+7\navv66/sJxilyzCxPqQRy5uKX+yq14DFyUW91z4xu9DJ2hseW1yvuhUA3rgF/\nbb+KXNLZWZ/W9JokLR/Jg2Ab7s2n3U8l3+sUek5e9sDXdq9xoQNLeW8kVZ4w\nv2yc1uNbYFUQXzzXBR+g0jyiW4NSnB9MkXbQ9ZZtDKLNoTp03/p8BKUxZRuH\n8u8It+CVbe7b1tnPIuUSFjXbHbFOGB/0i0D920iE6Yz8/5e5glA13WWxh6J3\nmTJSGcz5HZ547I51dQNQeOFDRzeOzuHwG2ZkkH0nMLu8Q9fG+7uUSL4DSD1z\nfNViKoZfjoM9RybYkPdosuBJVozad6uQpYftWufdpl9uqbs1BJ8ijbo96uSt\nX7Vjd1foSNA/QKjJ1OUAtX7yLEboVwrAWNukhu9D+SXAO6IOeYH327gjLpAv\neN+l\r\n=AkrM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdbj0f81O1uExCqudyLZN/eyUfBoB8hMrjPd2qyxzPkAIhAPU6s/iLXChlUBYCfTdk2yrAw1cAGt3uoOph3APtBdyL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.d70287f2.0_1620674933170_0.5411253516755428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.02e841b2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pXpLOhY0l2lxIxPuY7KTSS4jMH1KNz5T37mfmUBGJrm0PyA9Xe/OjTMmrhXKf77Xsnan3DrAgNr3Yw4VE5rk6w==","shasum":"d6cea9d27029448c46e57e5682585024ad6cda76","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjDCRA9TVsSAnZWagAAdFsP/A2CMcpNE+4D9gQdCvzr\nd9bwy7ht3Tpl0Da8ANqbp1lyzF7YupmHt7hhmbuPz9PTK7tOnTEzB6cINUXO\nzv6R9SoNDTg/EeE8btuNxOw/7u+aDVAlyEnrJwACwWftiSrqWscxY5r13JLV\nQZbn0pWHDk5fcFeGaSSlX8hS/+HoDCR7kiJH+9A06Zoq/QWkbohPkUNOlwWH\npJmT73U0Qm6t/agEe1vrbKnPFeVmxJsCTR9ybIppBoXwPPopsp8ZgEHvM/X4\nXBLFTtOf9RYebeeG0DhyB8RVbk1MEbfkad81DPRUuxQqRFyD++H9o2fxbdbq\nrXcOSY/Yov7GnD6+j8qie0SXn0m3lOS062XK2TX9Czex3gyeYJjihd6WU3uS\n2CIWIh9eCKq/UQM9GXnfdmJERbUAbzXhTVng857ae3hFMb65ocFOK7acalP9\n4G26EnZdSsaSFSuBUjd0Hmqzcr04Q9P0UkzwaBYYt2nWtbGSCxV7bFsSILsY\nF2nTELrxxauoNUlrDff0aBUi4gmqLPu1bwSBO83jmdDDR6EMbXD1ajfuqTbF\nx1LD1PkonQG2d8FR/La97MbJd6o+0ZNVVKLrgroSTJjZ8MFamlEBELdBSpX4\ngE0o29O02Nw9lnas/xQGXtMMlwuCOURhpqVcmYmW0FWQBiAq1OgbPb0vJUCY\nslXy\r\n=4aF3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuzo5/PY9K/vOrWZ0VjR69j6K0QokY3t3LTz4x/DrkHAiBUC1RNxiMlAt9piPKMPXZIWHcg1d8gZpE4i7nwBH/oGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.02e841b2.0_1620678851042_0.9126116569131577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.badda2f0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-taywmQ5S/maxlzjA7ULkKdLWOZ0eGH8yRikQbzwtUtghMbtdSAOAWm5JkezMN/ktvzkIzzLccDy+Ew1m8a07ug==","shasum":"ebbcac5c47fa0c9cf47f08a4f421afed55a37042","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEKCRA9TVsSAnZWagAALRMP/1mjTwtWmGJJpK/dGVB8\nkorgfznE9jQn+d7S+CaT5vMKX7dV+TdBOUmgEZruYICdwqxTlooKUiN0oDlL\n3/TnmnO+Pmhbt9Ik689z8/8+kmmB9GwzBzuRRNUZjnpzW1btg+5Tr2wNHYzH\n5FSLPod8fmyrT0ZgZBnWjfM8EjGCfoE4z907HGGqO8Rp+eSkCOtO3aMIkC5g\nWE0agH0AQo294b/eGJUAvdWhnEUhzFi4TuoA+dtX0LL3KUDhf+q4eRX1iTU1\nZtNvqagB1xrKdFEHrVX3IRm5oxEWVT0/qvaMl00kHFLDoEdnTXf+ODr/WJnW\nwLN1+vEnS0GccFK4BSVKBPqkhEUypHVHWLlwqd6mbxsJjXw7uEEs2ezYtmyi\n89cheHWFbjG+UocHlC0dFcwVrKTGcCqKVSHCsteG629YuOEEll4KUKRWkE6J\nC3pQB+pfUj/GilGnA6qDYbc0PXA7knbJ4gTZm2DWq98MzSYGOtIpPuf3lrGw\nKtb6zJaiKJtUmyUEWoK6bZGHd9DXApSi0wlDKNFY+tcOg+O1zVCGDaBGxoBV\nIUYsifqumMte5Qg7bLl2YuHi7D1JpwOuMM8vMai6eO3L4EOKMlGSu3QH1kPu\naMOe+coRDS3hf3eW3Jf3ceYbGkjHw5pgFfJIMhieMJcx4KnO2Ukfv5Y6uQ3C\nAeMk\r\n=p3fe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsmb7zeIdu1WS+9AMdkUDh/T4Bh416Jf/C+m6zaUMrXAiEA5Z4fSSOQjrs3CH5luvFnO9zxNVmjG6noIycYBIF01L4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.badda2f0.0_1620693258236_0.5485643320559144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.004aca62.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jlJO6ZW2X5UQff39ZiekAAImkZmlvk37v1JuS8dLzHo8+SBF5KwQ3wSyPIKLDE4PUMLp9SnPbOLJFuwf3t8F6Q==","shasum":"777fc10b11f1f7525386fca1426c786ad6cee735","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseGCRA9TVsSAnZWagAAxioQAIYxySA+TlI3Yz78PFbL\npBg0ye2PQEYYqyar5YPI6sfGMkrodtPox7R4475Vr0xBPYxZuMGC91jl2Fg2\n7MqZE8/UTmpePUZs5kyBCXR3DOuKY6gxkkgSl7CRh4hHCGhPuRMomJK2KuZw\nafMylwg1w2wGhcVpugAI9kIdDedJSDbnt2VXBBhatQjad/ilS5ufXXtKM74e\niUgIklKX9kSCFcEu0hQ2UvG03gUsVg1JHB55Q/NfGfqPUbzLLw4+V8mWr0pZ\nAyvPvXc5+EBXlzz2rkxIaAoGTobp340iIZRl3FpkcTltWxWVItQREuxoWoqp\nDckTa/5FiziWTZm8ZRng28H91cbphdn+xlDeVpZiN46JrqYwI9tM8DgUrbFS\nLz50+moIJN1RqIim3Q/JChrTYmwegd0hUVghRDvQxqgcTlPe1fcZCB+p0t3a\nBe7HIvV6aiDcuAYoqrmuM8BvaNOq54TCWkraxdym0DTIphbqVXrDqr2uO4nm\nwZNZVV7xHFnPJU+76no5RArJOnm/84J5YBrrRMWTc+0nCAmdnFRbQ083fCDz\nKUetsqDgc/bGClgPAqrSejrysDHzM5yPuxYEZ3K0NIED8Y1hp2ked1CM7yyx\nD9TdC789xbICWmyhFcEUtVj5VGgzMogdpuXSPvsc08LnJPqFET9rqY66WdLC\nfhsy\r\n=doqk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3E2slP4/tTBM8whBZymLe64GjgtMwx2T5lErw0YxxFAIhANrhvUWs1Y4yxWp1C+IOf5ODo1FxG8czNWx2ZRaDuCzW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.004aca62.0_1620756357845_0.7999411441177566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.4af17446.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zD+KrTOGML3mnkYRReqyTRbD89g/B1anqdRlmL8r0EuyMWtE5CmlYqwygfVNewcRuC9DruBqoc+qZ7EkIDyP9g==","shasum":"3ef0e656ccd5375221150c6ef1e7bebce2e30038","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDcCRA9TVsSAnZWagAAv3oP/3JykqFcvIrR5MpW+Ep/\ndv0Qi78zmIKh4aYyC3jpBC5Hi0j2qUMcXaUbLuoIbsHUrP4fQZ8lg5F74Ms6\n99IJZKUH6PACzLeOxrkk/zYnoSmlNxgHWK4s7HPmP/nq0my0oY6dID8MAS6W\nvgt1vmph/4ZtOLtVgGadArkUF/pDUu9WnrcO0oMm7BQXLK83mcT+opvbphpK\nzJT8sRhYYK1jve5wLzLMmSKJPcNPHE3SuvJmXj5QnmxRvGFAccAQ5XVYlt98\n5BIjWN1ECgrVM9BDQMKTqIeXSOKtSp6ja12fj/3TV919JmQUUglfxMQVuaNd\n96spqKciXZtBXPaM4Sdn5TdE37YkyQR0QhXjC4/TgquNP1KlkR/02TPUtYSx\nVlg//4koyiXb9FZNt9CLkvWWfsIUSS+JlXcGf1J7n2N7c+OWjas64g/FvWCC\nM/IuX5HPR3jThrDYLoXOOsYdewFYmhmMzm1JPeeGT0Hapb2KSCofmHCxuer9\nbqAZCO+5Fwy51bMc+ZkwVbZOFq81WygRojzPeSrvQccI89ekTsXl78Jcu1wV\nRXaBsxiKzxuqbkUocizDjYZI3hJql7kaB2UXuQ6Mstu0+dKMErHQugDmeIeY\npJv9ey/ANLIG3+bbcSufVZmhy9frkOEn1Uqq1u1TbylD8in09r7T2P6/zDlF\nNoq1\r\n=02T2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs9pjtwqHnPpCd9ke9QIzNnmjKruX9Q3bhjdWdDp+YAQIhAJFZcgKwoab1+tXfAoVV1bXS70eKBL7xXjsJztYiS0sc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.4af17446.0_1620758748263_0.5034382524572261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b94d7187.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NsipCvhNPinwtzosPVeKPg+2YV8fIF1wZ9M86YNz81TdtES2mwQ2OoaQOc4QwMdpUhtyolxbI4AxwG4h+KhUiA==","shasum":"a0b99b81d36f554eb21739eb3a7a2c9c2805ba19","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtInCRA9TVsSAnZWagAA8tEP/365iSaBr4cLMPNA8omN\nx+n1k3SOQsPoYVKcMcopBXqXhAysZiur8eAt42VXYFULlGOMs9bSfdDzft0G\nDjorzhvtMzgTO7r2Au58DuOlgron15ofzAL1nBl/Q32Iy4Oi4VE/mRYTnmea\ndrBi8OnIJSu/jzY+0TwAdrhOlGfxCOn37yOuC7gZHRtp1XzlubHXPXQBhDn4\nrNu0Hpp3mr+aQR1UfzKqHKmplmFQa2bzQhcv3kpcNLzKly6GRm9phksRxWHE\n55zisgvJy0E7I6aQE23qClQqixs1UfqOozNej2YJ9mhscPphDT3xLgOkSEku\ntEsmrBYV4A6elNdROvvBHkTW+mJoQVY+P4SldVKejgmMbGqbZCaZJw19wK/U\n33D9ag3B1Uf/jgRZK2Pn9Urc7A0cbOQsF5979oovuXOUSO02ItKQsALkL6kt\neZjQvm4IkvdocruCbo+bRtc2FWcMWYV5PVDDx8qCDrIrznDTBUo4XRl1ktk/\nPSlSrDF0vPKCAyFLVjppBgA81LdewKdDPT3esrA/7DqqQtN76NfrZPHXCNvT\nM9/lqpq/EXaSipaLjd2fF0kEzRFiNclwzMv6te1w7zzX//EYr0MbYNf5eqtP\nGRgtKlqJlKwtus5KxoefFqcxsLriSXnXObWgR4kUCim8+u2oR0Q/M97TbWn1\nIehI\r\n=gIMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8puNOypxnF0drhaAj766ERpql8ZKi31ZWYTUFe9I2ggIhAOkN6h6hzjDW9QBTLuQnBB33eRmjOziHl9Xurm9pDfdN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b94d7187.0_1620759079142_0.3644779412278778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.4021b2f9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KdieL93D4GdHI9Vnrbnm+UyOMnmOu7LjhJF/wdL6a6NSNxF0tAP2Xww3yAXvTe2JKrZTSz3zcfmVs/nb3gXqBw==","shasum":"4f29ca2ecd2fba71887efbc7bc53458faddcc96d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/rCRA9TVsSAnZWagAAXM0P+wSjaEAdzxGNRJzBdix9\n9N0M5Pd9UhdzIhU31EUp3bILqaaXMF2OxXAmeTPLlTZAYdJ5pHvLoIdE+/LK\nYfSY6D5MQ/xc91vjTFEZfshk7qDU65NzR4LLBxeYys3ygrxiTebHsw6GCKFz\nxO2qBYUYiwiqzwc/VVs5BYbGg745o/5WCkyD6q/o/0Fz6IrY7/Tp5WYD1v/u\n8HVCV/lIkI7L4XlrflwUK8Yq9TN28O+w/oMlM0kOHh2y6zJW3xeM2rJKHdQ4\nXsqQxW8cP8O+Y42Q1GRtAlUwZ5HBLqG+0/k+5FLc1dqi/RKsU5gVpAhGkhEP\nyAe4KoDSn8kq03zy/K8dd88mFqzsYssYaj4PFQQEKC279WHpdbUQPLbWbjQ7\niUPuITxPw65gEHyVhU4jcmIBXbBW9fUmrfNKof5A2vtjtbNUMT0h3UfwRr3K\nQSTrNIk4AgyybTeip8SbrPrP1CQvvfUqNWzuj28+1sH/pz1PxpBIytB1o6RF\nCpYsZLivpZx8VB5fSY90RJTlayfYoexZqg7mqdEXqQ4oTl0f/0LfkW98vmFP\nJ8zpCyq588HZCvy6biimWmd7fuicI+VitvUVAjVQkGaGUzWe9kToVY5H7pe4\nTXQSfzkxYBlsNFbRhKYkbiuFDNJeCNq0wZmQDTkw9mwNwz7weekY0xubvSh6\nSzwx\r\n=lkIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZ60FHfuoS57bYbWeAMs+zjMO5MZPdm5II9Q8b9lMzeAiEAmpZDLKAUa8Dwl17D7dqPqSCeHUukWrsW4H9DI9s3oQg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.4021b2f9.0_1620856810653_0.2584774645485455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.6a5956a3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-50D7wCatcRK78gvKkQVbwmSF98Y5COsT/AHKtNCMbMMoRKbf1aS62pTXlpFQRoimcxKDP+UZzOxgselzdSVEwA==","shasum":"6e32947469c96834cca072e5ddbbf20763d8695a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPjCRA9TVsSAnZWagAAYMkP/0xKnODQqG59aq4ohc8D\nKHKHrAgBLqEiYbK0YdAMSQ7egbAcOnf9LyKbbCqMA8NSIHdMu6HSSL/Kf6qd\nKxEDyAVjeCPDYe8FOlb599m24iB6I3YMBJpKZIEazHFWs4xEZi3cyVMIFbWq\nE4A+DoMjQ5EaPyCFYeM4lQKhsDGnlduHXvhCrrlMiBJMxx//eCsqFRZ7Q9NS\ncGOm2C2asM2H+JzpufJmqrG/VhmXgLytQ5LJaWQ3foxapVYP9ZzIoraWIIcS\niY3r5iwcw+mbmob29nr6q49p0laL3ZqtCHQAi+/vuoXTLro8ICSS47SyiWvk\n8/yAO24aYZTzFLJWywfTJR8FRpsi/BMNU0CYuvtWbSLQ8OvhllNDzlSyQSpG\ngU8y1X0f8H+5EW5BaFYnJ2TL0BkWSgLdGGlELd/A5fpEI29aAazRwpbldbHV\nxCREo4Nfv+6ZKej0yOPDaFUMDTQeDlpfgagj4BVbKpqT5Z5qnpeFberKfkpp\n6pwye/xpWuHAXCtPMIhHEpwFtG3R9lCIS1xCdSeHV6cZSHPZTw2l6JwTZfsA\nrLccmGYZOG9zSVs8PPQIbxzowqhrlLVcgWMIHFklBJkuuB5LYI6IJPp4yuI+\nSYncUf2zLC+hpx2QX8F5iTOGeGTrvdnN3NwIa84cjOqYgwPr8hrK9nwvoIyL\nVib3\r\n=5Hcg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2i/l2l9HoT4tzcH6rqe9L4MPNz9rbxQGBM0l6nzmcpAiB2ThdpQM3BPa43ySR1k4r/IMlbvacAueGrrC4Q7bFANQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.6a5956a3.0_1620857826604_0.7915462088622838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Huc//hR5E6VqOSFqClQOHsC1tjHpl3BiBXA7rjr/yaHlRzlHsd1ZmdAYaHdBU9oEYv94IzRaRFXDG6JLGakG7w==","shasum":"efb7a3cf923b2e7487d634fad3830d0518296f56","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6oCRA9TVsSAnZWagAA8TwP/Riw/Xg2G0rVTeMpE/Ca\nB/94zCZLsW6D+sJlmHGl02tA9FEdWdHmOmrQgIXOCxD83WcGPhytLvn5MFnk\n6NjUkhfuD6WB82Gad5DdYv74W5T1lFQk4DWMWfCbggJ+u5tq5XrxI8dNmzh+\nxlAg5JYSQbCmt90REYP8DG0cF7tjDItNtassYQW3anc27o+yU3OSe72Kw0C9\nrgLrKhgi/ILL7JiX67J+vwaH07b+He5cz1jEOExJofnCdiau9EKc+BkYKLMZ\nvL3klgXTdDr4xNuojSLLRAlxH6z6glm2gdMJdCOHh+04jqYBUo7YeQ/7LLow\nf+/+P161BxjgWNAJdKsmQy37ZHkQxkPcaiiDKjfbMuY+ignojxNRAgT6+O3G\nAP1TGgnweyqdZdvcAYQW6jbNBsG7mwwYb8WsLTdZayk7bCuqzVOmtAoWzUs4\nkvDt5M+hhIF619YmyuuxMamarf9jLs67uM+NEZ4u/PYgFfJU1JDpuzq3qwtF\nHcuSJFfaE+gKIfwCL6Y4YUYl4VfvkCOluNJkPP6iaXZdD50Gh+OyFzhTyoZz\n2KgFc/zpIb5KL35W+a8mxD9kmHPZGZpV2OFo4C1qvAhqofPSbxfLfN5fUK4X\nivipAhldwAPhz37zwsCW+/dYd/h3/DTG4mNoL6fy5lkaUB2rA8HvT/Dch0Ca\nOSyX\r\n=y+NI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjmqpDg70zrBcrANLf5LBl6aR02i5+rOJDRr1dP8WSVAIgFHSlV/b4fm5j9KnD2n4DDWvKSTlb0fgjNyZhQI/CHM8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b6e8a74b.0_1620860583666_0.9340067841123003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.c94e1030.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R/n2tXBxUhf2fUwVTROYmK9MMtcMgeWXyyIQ1xvq1QKT6dRECdZEInWwaFJUGr0o+0CAhI17ze/7W1AFoCrQ1g==","shasum":"c6022af38b2893d2a8e02a493a8ff6290d360653","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAHCRA9TVsSAnZWagAALSsQAJz7wdF3UcVZfocPf39E\nDJBZsuz0kmg8FdXhkmjybviizjFSEAeueFwAMwAJKGJfzr+qa/IBL2jzUZHJ\nGSVLgKPxsDk2bTgPyFDCKm2R0JrXz0s1oUI9gWhjAHvI0pxeg/YPtCNJpLjf\nQSYCi1+Yao8+wufgR80spr0PyqV1kr3uPLkYKcqdhUB0q+Y9PbTW5E3Tbr2e\nwIMorOermWUxH2k6w0lEL3ZlIvF1ITA9Ql0X2aazlK4ErrXt52t5jJXd2t3D\nNsQBMGEdT07ElznQZzBLB4CXZAGRD5iHfeDaQ91TWkoljGPr3o5WzOfAmPHa\n5g6M0iwEc4+AnCNCYxy1VjSgRx4Ya7eSx4XA1RhhKbZ6lB1LCOVrrNB2FZ8F\nW1sT1XFJ0600DvTLng1J7eWpZV1K8XlnHxKxIZpCBZAhybPr5oiNbRUbnVqn\nyemBzGDnWksHOjxmL3urltJOluvFHzB1RbrLU4HemtAyBCR+bwucO1lYdgvn\nHbI1nj3UKG2MRmr/3AsNpatifo6NLtWLmBj6D/QO+mBD7jI+5eqbmUkbWA3U\nDJH1iYSZ1HuSW7qni3UCJ0EG/C12o52vCAFmAjr/mQt65YOcYdaoRZ1XJRzJ\nWkmOA7wEs5w/iFNpD0Yh9w2tChOkaW7vE+SdZ2dLSHFquoV04yKCxHs7ezdI\nf66n\r\n=tAbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVUsB2eY076NNuBOuP7Mp4bL70h650VZ2tYzr+mx1W0AiAFfi/Q0v8PSx4Cz2aYjiqokH7cGrsnkfij7YP8/fCx8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.c94e1030.0_1620860935505_0.3080006356696079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.40a34e35.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n97CMhqgXAmTCbUbeEvujyUHK8vQgKLe5b3NEoG6A/bL4RrekfavEL0HYQREjTkURACNZOKUqB0nr5LaVRwvoA==","shasum":"ec6cb1688171f494f9dd490a5d36c7b1aaa24b58","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuLCRA9TVsSAnZWagAAzaAP/0ix2d/6dsfu8E0av9Tz\n7gb4F71yxnzqeqBLgy3jb9OIDqvk7E2KtECKwZUojjVTYuTcbERKLkkD5Kt2\nLfX/2Jvx8EWyqRoFWlXCZe71G0tPDuoOCQcL90+4c/RbMX7EOJ+S7n7EHlCQ\nKw4fcEdor9sH0mX24D01Oqtb3vWwkEaM/pLP2rnOMEDSq26Agp7/jRjb29zw\n1LfRkC54tlFo304APakCdNzEhe7gMTeoh/H6QuU0jSM4YpCnJorjZkNe38GW\nBtHYhpYTxSIQ5FaZiYX74sg2kG/zhGJ+7iAYcUgAml6C4Ob8lpaqNP+1Hvk+\nQbA6FeUX8a1FUhP4k5hT6mwggqkodvt4G9U2YLhB2DTioQPzCqaF/uyjxFhF\nBGC69tx0WXBJRD6L2n3CTlszxVvaQK/TtoqUYGoye7+tIwEActk1XsMc7jWK\nCRcOPyHz7nrwFH6W5EohTfwgqhqBYXMR2CGAP7LyDDMe6rm9WFTrVsmJcjB4\nQ6dso79gsJLQGcu0yxuZNvodK6hvjG5fmg96IminoOfU3TEwoYWJSDb2/+PQ\nX9NDDvujHRIY2U1ZJAjGYJNtvPg9hY0VXelR8MIbZOUxoWho8VmW7EZ7+46x\nTsuWQkpO+b96mLttNNteWZrC1q4CM2zs35GDg8A4j4gSH+eRbgxCNZtgIaIK\n+fFt\r\n=xXG7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbRt2hSfgsGlp1jplYCcwG3GM6nsJIA+hT9wGS2i+obwIhAMC7IZTppxLXOIe0Fx0TkoA8i64AS4GmKe8SyNhFncVb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.40a34e35.0_1620863882659_0.9324738795134495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.1be14d2c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Mo01jhKMkDPEnKCMk7JDA9+mGZ2QyR9Bx94NRW8noMORyC8HGPdu+L6a33sWDSXqiyjoicBcDPedzIs5KgEdBg==","shasum":"8b414938bdf741e07f9c4dbf570a0579c1cae850","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWavCRA9TVsSAnZWagAA0Y0QAKDvTpckcJ0hNsYl073R\nIOY/Lw15HhVF4omt3oV0MJ1VXQlGO2i8amHQO81mW3FfKf4X25BIaGTd5nGV\n4/F2tX7hHZ/vgA2Zoz1kESpOpk27lU+bdtqlH0jSE3dtH3NVFPC/sow25scS\ntGoiAy/UdoVeWEJEECEC3agi3O/eLKvp+qVu/GtfJFTIFtq8kjR6AVpauaxv\nYCZrLQH7kr0VuSm9YFDRkX6drF2jE3Sul2JjMgCOM3WF/vWD17KUw2TvVyn9\n8YsvsgTQthmSEirPccxdHZfA6jtAVr04ljKH1xAVDR5Ell86xWW42YfUPqsY\nb+Emsv9YRX6nHgxoda6E15gMMiy9DN8I4r6YA0CJWIsXv468ybo8cSTKzd95\nGlJAcul2EE7Rd7w2W2U0SYp2gZyZEojqR1tVRFkUXGWDQDKMD8x/vYJETjxE\nP2Dv4Oikt9IJRU0MSFp+lt3SgEb+Ta0wVFUtnv8SwcU93tYUr+id9XevI7B7\nIdpjql7gSpww4U8iq7B0p9pB2tApN7ApQLX+bEE5f+fwh3IZ+wrwglBaqA5x\n9cE1AL6lF9vMCZdO3r9iQD6qPx/wri3+eMUpm1szuS3jOtOQ7J+xoUh+cdkw\n6XzQWAEWXm+zhTd4n9EQyLN8Aa1QxZoysfEXgZ67jbnSZxS23Y7JaAOj94Km\nVJhu\r\n=AyeX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3oshnoyOtcAm9r3tZXTWh4miV0TnMZaiu5KmRSrxnsAiEA3EvDkHNQhsJAYKIuEMt9g2QHCyLkyCZq8+qtdDNsF3I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.1be14d2c.0_1620928175337_0.4457750948425703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.87dbd64f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-M4/xbbPjLsOk7TztZjSMAHP2BWMX4d4n8FLBXxuAtQaTKGQOQPsPE/G1VvJSUjOLzyDIzxhvawmlslj0xd69qQ==","shasum":"77e8a6c3332bde2aaccd0768fbca1aec82173d84","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":67687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRiCRA9TVsSAnZWagAAdCoQAION6+/cqhHFxjmO56jg\ncG/YHPKZnnSM1yagCsHZFBCWA22zGR9QLwxI4vxEYBktp45k29PdFvlCJE5G\nOBvnk4jXjSHLD5I3Q1lUwLTDDB1FRCF206zHjp6IR4T448IvhU5SfgmSL3NY\neJXMNL031n5VUHgpAsj0KXoFiS0OuJC0D+R+JQcwk6UHoO3EWuupJ+4aM37N\np+UwVn/MzXvIVmr7nvC/DdxmVG5gbfMAm4a9X6pTciZYaa74+Ed8YhrgQNCG\nVr2lEx8SmaRkeEDUBVoSuFe699KuRB/So70JQP+6NRwUpucHzEtvncHqF3HJ\n6cvS6/iaYM6Zz+i2eViALWetFlIvCtQ9s9EsVtQm6o3pBbcGz8AppgSYXPtW\nZ9N1K0rwSLQ6/217xKLwprmIWs7cWKY+tC5/mLKxhzGI5MYMrmqGdSJ0xLN3\nWgPw9MtCTYO67ArpAo8eqrMPrelkvmlDSn5171EU5SjKPzfqJl4lekNZfxQg\n5xlLXuKBm/f8rCj+rrScBkuXGY9miRaLbJpYPXoje63c8ziM1dKBunDBS0xE\nsSCo8JKKtNwKcDlqEp+gn+Z5Q3p/hIhMyZhEf9CWwGZpLG5AaW45LgB1XALE\ngpMFWrkXOGEWseiDAxZQXFVdAJgg3uHDEBShwwBHO6awRt59dPMDNaWwussV\nfHQB\r\n=HyEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3drZSphf8w96eozx6yhyDhPHNxtKVnC/HLilL/1ZHFQIgTZX1w0HkaP1BQgKu8NM6KsgaU3I32+ETd42EUkL3PgU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.87dbd64f.0_1621025889656_0.49655477708433793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.c452e4da.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U14PoDnqE9OlZl5vPhVujwRRgZdinlrOL3Y+s2SbMMW4hod4mOp2ksGSPJFehgNSM/WjCVlqorER3Bqa8vT85g==","shasum":"abf56d74a5f8967727646db3ec3209eec73ce234","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":79076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzfCRA9TVsSAnZWagAAVDAP+gPc6Ussb+uzHjDMUVH1\nuzgwSIZoxYMbS5Haldkde/8YuQpXB8+ekQ9WideNk2Sm/7QHZpndGpyGez1E\nXNk3BDJ6Ef/Umaj1+Ui8m0LdCFWTIR2kmPps5tbyjjEGFztJTr3lwaiiYxdH\nfb79wlNPrvXTY31RdAymaZDuzekltYk81hBKFo1vWkp6Fi5LuW89HN+oAWHb\n/Y6u+SOVZipxFp27OeXenVYewBRF/j/0qNDBVDv0yaYbEXJ1fuTSPPWbh8nk\nh8WUAyQ3G+9EoFLUnmC2oXTpUKCaETWfOOEzGDVMpLJA2+r0z76DyRfPvmGb\n4as4hmC8wb+/je9w9F50FTF3Gv0QYR0MogsrTHhuFALQtYBxw5EPhLISG9lm\nJA/L1qCKlNdhMXe4HMz15d0f3YfRFZez7qMoiZUYpVdOV0Qsq9fhW8z/3mZt\n3O8RTejtCMEsHJI+hFxLua/+DsMF5zca1zXM5Hs/YlrVQRtDGKi7jkQS9AJ+\nwBWotlLza8r9Ne9IWfi5sbjk3KzI6B5/2nwUJxU7w+I0TmBMXyeqTFxypXpU\nmsDHtm/ThGLnS7cpYrwYgC7pGZoKg6uY/pJ1N/kghQj348HS5ejJxRjyBfmA\nqVHBJRPBKKw8ykhrtoixJOw7S51EK0LWnrubOLICaI5uXWdhW79VB33NiDIj\nm33o\r\n=LPgv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFx07vHnpbiWMYjsuKX9d4CG3AuFSiBeqk0if5madMqAAiBIp+YBI/BonBQFuXXYSfJZlrFJbMbvjU/BzPSmktyJwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.c452e4da.0_1621294303429_0.5147761101492221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.2212691a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uwQseEnGZFFgJEhmkhbjRWh9RM7Cci1BsnzyQd2LFZHM6UtVn5VO9ttqMMwaS4yqN39lLwOLRJV5asHr1XmMPA==","shasum":"7118c45843664e791084423be91e01ec932e6577","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":76519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowG2CRA9TVsSAnZWagAA8eEQAJ+a97uclgiRw8Lgi+PE\nyUk1smWo+2p4APsBjiF6E3dAdMdT00D8DxPT3t3y1moZOZfUZpTbb9crsemt\nXkJmV5ZVNPKSSkAY/lYedR5e//p+JQ7FABVAp+tHYWsuKL/IiynGBZyJx8Xp\nfT6iqSyDHf/0H4HTM5RVg8ld9OQoR6P7eWHA0wFssX+Dl3Qe2tEKC2BiKfiB\nvOcIAS2HygC3AKlzuESNCPD5KYU8CCcYxbMq6EqYU2WCBdHMH/VofqKsTgHS\nFk4zvMx2B8JjiR9wij55g32X0Hi5yToYzuKf8qAltwoaBGy9nvoflAqg883U\nrJIOp1eM2xdp0vzxLXjW6OTZHu30nduvhX5rkp6MsiyUvy0W8lxuSkAMlL/R\njeeqBc/S5sn0Ku2G2bM3B++CVNQ0OrYFbsyiLoozMhOxTxOry/5JotR0SeMg\naySNp9YfhihPGu4wYVgaDc+hZu1Voiw0JwfZXgLgbyBePkiQ/dWYIPPkCOPZ\nOM3GJ0WAgnIKC9Q5njSiemJWTxd1P2MTT6Ubtc1n/TpmB+Xf7Qqnq21zsb0o\nriY27f2qeI2sy9s4GqOeI+NSVv+EWqgFpYr3AJ3k/RQz2M/ibGykCCWC59h2\nXX22JI64SiF8QeO1fYkH91XHbyVf3gU9/sO6Jip0+JK9S2Zh1y+rEcfCiEDD\nL59F\r\n=jyoa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXNC+SNSQwXy/Q/2xjzA+u7R9xG0m3bs9RF6h4B+rgugIhAK5xv3QW2bVzs32XFJy1BNNJAbqxOakManhOwTH5dSA9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.2212691a.0_1621295541719_0.7466671643864253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.f748ff2f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vW5GkeOsYAguKNDFDC+nWGc+K8R0tYg+R/u5bemUd3WRpvdutam3dWK9DY/UkyCBp4n5Xk/esQLUB0xZl2jAJw==","shasum":"9df2403057fd3175a129dcdf23e2111f760bb4a5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":76523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowiwCRA9TVsSAnZWagAADakP/3WBXG/8Kwjk4F1U9AKu\nyS4oQ7yuLiTAbMcU1/9cBDkWlT9ck/f5r42gQCroam2uF9hQUHLzo/yG0sD2\nB2wlVzDQGBg9SFmSncKHHpgzMUz9RkJyj9KZozT82oKZwHb4xc88Np3HMXPd\nF0d06kv+hYcrvBNxMcjiFX66WjrqtG8j85xMsrxuYtld7d66EOKRHo9Q1DBm\n7FRlFU0R92miHt4t55tg2CxmayYk8hgLRl0YMf+bPoN4FB/wvpZD+KuHiNP8\nCE8ZY4rSy77v49iOm9MHyr03wBnDMnouoy6y1W6UGR+dOTC1GUqD9nh4c0Gw\n9bA2/A0nkTdtdUgNlNhpodDPxO2Y51gksCspcUst87skgwj/zbIe9DI3KsAh\nkSheigecv2UVuw5120LysWmcUzSNkUni12OfILXl4YwrGs1izCNhH6A1o4CJ\n/hpkJ8jS4SgVozA7hHTgrq7+4h3/liUpwTklrI8mMiZNpRNyOwCqWRhgdgJD\n97tY7nvX9/d2tEb7vnyzca6SiwMiI1cveVDn9KRXBKDWnweP8rtrwMF/Hwdv\niL2qNxfoaL4+ySBM4mK4AwdLyzvfaJrDBWyBWDnKC2v6NfvJYLw8N4FQ5Rob\nG8F2VKo53v5TgjjO2dPJIx5YzaUX7gj24E/1mFcOgfevQMGRM3L0OKnTMXOL\nmtQD\r\n=EZCr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEBEAqt2LLTjsbw+bijft4kXaldcnKmyXZ5V9Da7y8sgIhAICSPNmEfPVSGhYbcYq98+JlloYR3hJO3dkj6vhBXrxm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.f748ff2f.0_1621297328253_0.39131376440295274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.cc04657a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bi5DYaWwjPj2B1bjFiRW8WObocjYhjayyS3RgJ1eO+J0NI7Ot1gkJAbJrb4d1YMFkd63/WLBPvj9/fR3/G25Hg==","shasum":"2cd9a40761316a58dd02243baa29d9a47b1b4185","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZrCRA9TVsSAnZWagAAljAP/3NAXWGaUfu0EeJ3TvBF\nnfUtf/Zbbsw4/emA8XR6cvrAgDMoGgGy+C4lmIf8VWnDZg9VbLbVc3cgE/AW\nfA6eyH8BxUgKGveyzUR+xq7X7Q210pPZGa1ZNQTpwuZbrMuChAu9K1N/3wib\n4FJVTLA2VYtljR1hu4JNIueT5Ese1qUYhK0yTrVtgF3pjoYBiWhtKVluBScv\nwWpm3z6AmfTIqL+YIdPYXHfD8t6B5Eqk8sPklL54kag2Wt6RzlqmDHQ/LPro\nR8VS/5Oo/+6pfKSIz3uTh6hL1+LdzRT+yhUyj4az8cidUNFA9fcZiHfrPZIF\nGN8yy7Sj4GDthvqzJqGDyXSUDOY7vyQ1d/agB2enWPLZwKHNv18vna/XIid5\nFFSIFGtnD7rEU0Q6X1fQWNtIRdscIndmLPYnd1v2oYKJio0lFTm6fOIWxekw\nhOYJ8wvgOFyxlSF0E7nOYI1VcKbhMYSBdIv+7TbijcclZtl1PIIwPTvKZdYT\n9OR92lZaPKonl8G1SqqJonBPwHk7YjHQeAZ5SYWo6yiIYaeDeIYdEi9Ur/4M\nDMcBmM2j0K4Z2Xf1rfeiJPykkCrssvbdp8OiDQeV1bLf9DE2u57YXlo7Kutt\nPvk3p6k1FR2fYrslO4srV0Dti54d/hGfsOppdfoPca8dURwqc4ascGTjsccU\nOjaD\r\n=1BM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRoFJ2TktKYdibmBF6h8+Q5rp3OnxPH7Ystq45f6oAOwIhAO6szSe2Vz8YeZCEaIaO5G2GHpPOUGsF3kfrYFz+oaSP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.cc04657a.0_1621300842685_0.09233088295292546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.3a3114fa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cIBU8Dg5kSHWBz1487uQHEuFmAPDSLdaJe+QOYUka+OHpAiBuVCS/ZF4QkntQQq1IBw5QCaphOf5IB2b8OxO3g==","shasum":"d1fc7d0aa8a6f288515eeb4e6f10f52c8e5b5f81","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHKCRA9TVsSAnZWagAAnCIP/jmdKx0SDr5mzYBg9yST\ny6A9BnZa30ggOzExCWgykFGvj+U7KJhxfiAI6JGu63dW9wxgle0vH4oePrGL\njtN8uXsBlL6QPwW7FgndRj7KzXCvW8SSQBI+Z+1GX2FOEnyGMhItwt/3/+3l\nSgnjG0kHqL9SKRKkAIPFerZE9bt6mWKFeFhTH/xspNiCecZ0rzAPxRlaWOjc\nGUD6ooTiel5a6mE2PduLK5m6jde+2r5nqCJ/jVWElj5j9rSjkL+mzpcKL9Y1\nH+iaU01t1IwlI/XeWS8VYwSBJ3zTiCuRkUX/fVo/awwb5yHFAPKzAN3okpsp\npL0xufOQY71SmxSick4Z8rghLUx1RtT/ZgXS1OHbBl61GN4f/LQk4Rvye1+X\nwiBv7M/Nx/xBYOgc0w/PufDigWIzFW92qSe4nnl2lUCiiKlV4QhpdttkRVFF\nK9yUmAsugD6pkz5uY0ExJE8sx91nA4ZtuWj86+xa4ebyzSYwhDJaY37HKDYb\nciS3+kVcolP7vNtM25hPtZzA/ygQQfSy9oun9cmE9nfc5zMVa1kPLhvzCxU+\n3J2aBf9rQQOQaEYdCmzK4oNZXKXXcIA23xt1YiND8hWaQs/zLCJWkI5KHU98\nLeFQ0miUBwvDQz8G4ByvdJkBLaKH/z7jEWpQtoOyoWeIl0fTfmTy1T5B2crM\niHd4\r\n=pdWQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRz5xZVGBIOhPTbHPyHFs3H+VYBY/9w4VKVG1cx079IAiAhK3EfPmNtD1zYnlkvekjWOMcDYwoeHxgngD/Iox93Wg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.3a3114fa.0_1621467593888_0.07969167394145882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b46bdf83.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qGZ6ALmDSVWh17RQHoRQHjfEGRfLcYJ45BeTD8Y6YONYCOVTFyJbLPEfiZgguUprmVWnf7jrXxaR/cPhj4SISg==","shasum":"337df2424d8ae4377b3286fb323c61d0d9ad90d3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBwCRA9TVsSAnZWagAAjjoQAJrPXgFHfD4pJntXCzjE\naGRlemcJN5wYtXUTPx6wMBSGBCXzyVfytvFv60anKyRI92wEz64P/In5PrN2\nvakaPfSupCDGC85363G3kXTIF4p34BBXgpEy8DvPpMkJ92HViOq9w9QdUm3n\n6R/LmTgHQG7HEmC439WjxR+2heRK/Myusu8h8MP39wj2BvYKv9rtLTqwqgAh\no+fSntjZtWeOWuKiCtraI4nF1TetiWv9l0210RffVSll9EJCclM6qwUj0VjS\nWmv99vkgnZ9nzrwnq/yHu4I8yaQ9IU6gqHIND5sQBc8Z7Z+mZ4depjBQHD9F\nAw4m0eLQ6e4EQKFauWu5idl0LjUiBNE65SGRRllqNLE1eQQLuzx6+cTJRozL\naYM5LHTDXL3Ysgt+I7u+835eqlmAW0QWZ4xj9SM7xTVC22LvNYAQKI1n/F/P\ntuAkZC74ZvEyv2n9mBp3gANcEqh6iDiznV3flPP5AvUfz56LmVVc1NTPMXG2\nVHs0mDtK7OWdAU0G3gcXKM1tLFkIr79fSuoxLyPiM6PyyiPWj4MHIFvjdEhB\nF0E+bIeWBRhdXch3l2U+4vpEdmYOVM/5c6kNOHvcJLbIpHmING0huS7TtAMp\nEu90MbnBFcTrY7H5gGuu3vjwwEZvLt7pRkSeI2csIUwRyPj6DxeU03+U63R+\nc5Yi\r\n=LyJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfVCApvAv6YWqfMsJ3FzD8VxgqNtc7Ye7iKdbgLoJZqQIhAOK2SZFWOK76swToX2tlbWQtEqO7ikBgHslENUSC3WPl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b46bdf83.0_1621475440406_0.621098376473868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b401a081.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xpDyF5ZK5on0AeUzw8gbNwCk7ELv5maNDqrvZL9Z23xomZebSlsfbJf0ElC7Y9U1n4u7SjuShLcnHdMJEXivlw==","shasum":"f7f8c606a2f66ffde699866f33bd1c87483da02a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEC/CRA9TVsSAnZWagAADqgP/0TvFLvr7I1Fk2fTOZ5t\nZPL+VmB9Qd1qLNDeWuVSU+c+01nHec8vB9RH7hQA9rbAZ6AmF2/yTf1OVx+N\n3Od6hX2cWdIwEpKjor7bpi3NLC5Ns9RhVrr7NblQP4J/QaUXHYPRw+H9gZi5\nOZItPx1jHwm4qkRlrYgUiVrPwOQ5juQtHSMdbFCAqkAasoy5tnfIs78ad2XY\nFKzOpYQaDWu37P4NGO0s1tZGBjrDrXnhGpEyncK08G5fYnn/1xNUvPkv5A59\nP+cw8y0sXieV5JAhsGKTvUWU9TX3l2/4BxVXi+ZBUxr0T2bL0c35zCYcxbQL\nnGadJMWAaqURxtf3rbvvUq9RMXdC6OQFYBNY43dqAe6VGQoJF17NC0tswY0u\nUTorUZJfothcOBzzRjagWdL79zkXvvOlFC7vzA4CQacNafhcq5174ZVZTyim\nmpY4DRPBVk1fONtg7Jq+Pwq0k2PNGovX/8tOC9TP02LJPoYq2iwW/de0ylJl\nQeiM9zlfnCS73bKsuAj6mKrY8o+o16jFCECShX1ktn5dyk31x+AnasaXHjUA\nPqZcz6PyBRkiS4xvY2ddHhTZR/CZioVg/aR1VKIN5rqe8utddeL8cby7BEAg\nztIeZ0sRsh8JwTYn1cYqivTyHVQzCvWefibo/xI94D++XQxWJ9RoygwwRC2+\nja65\r\n=iYMY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElS+0+JRBTb2FJiwhagjaO/OOSkMv8bcZKWnXXr4daoAiEA2eCYx4FymsYPXzJ6LJ8QjJAl0RkJAXTgNCXJYWnMaRU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b401a081.0_1621639359084_0.35882862178245056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.012c8dc0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AJ5sKGeltPcB/4vEiOqgBL1H9zrGtdR4BlENMECiDN3yvG1btHGSxtLqMac+dk98COlLW/a+b/XN7j3zPL9hoA==","shasum":"11add60f4cba25c20447b1b5ab7dcdb5dc0298de","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1JCRA9TVsSAnZWagAAvsYP/3CCrx+8N74XGIzVRGBD\njsFyzRRzdtD93KK4XDEJvDWELu5VXW0qEoqQIN4dAPbIe/kAA6dCMaqa+4pr\nyqI9gZfImDsv3L+UH1J/WmGTOioZzwOxaCYEUrPaOnf56v6o/NR93JMzWBcF\nlJptecpyD43GcVmUSyJ+JVtcdz66JB5aAWsEMS7BxfTf3oIYaU45t6qV2fV2\nUOsm7gALsv5PfqOePGtP9U9qn7NTcwyXnhAH+xOKzDWgdAA4/sIt2ZhCfHWI\np0rh/xEJjkBQI7dSoqPtpT0yW3eLCmA7ODIpAvzwPWdiFzpS7Hxdk70bOBE1\nt3FTVGd3SHO2Voefms9Sp+34yAhvRAGAon2AZE9vt1nm+crHKiM7gWFCSPTC\nfuSQtThLNA96VFTiPhDEbXg1HYD9JeoxwWUFnmUtit6eIFpQ6u2EiBNkkuBN\nwSCycAi4fXmToqEwwsHIBOhfTTJFWNMEe5DQkSXvhy687R9LyVxV0aInW9Pa\nfpfP6EfM8LS0L3hU87OAGZXlEDwK5M8B0Vt/8PCxtlOCqv7zTRUK4WTeZ7mw\nzqubH93Fkzjx1rHAKFN1fOKnEO23KVtcc2DNikOcsVgi+ap463zg3/gF7Lpm\nClniu5IhkyaqiBeC2UVIx91cHAaZB9GQjNhhXFOyh0C2tieV/MQ+N86eagv/\nP5Jk\r\n=0+B8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCCX3LH7rtp8XLRVO0AuEsmdxNfmEiIl8yDH8SZShFXgIgJ+Lb9paKXueU3cG4fqLY09445rMMJH1J8/Efut/Faaw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.012c8dc0.0_1621642569480_0.2545333104736591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.e01a1731.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kP9IwwhAmY0z9R37vFsb+AgTCuqNlwU7T/WF5/Nu+cUBmCSCbagU9c5XEoeq4/Jff9upfyDn4TSY1MqehNr7IA==","shasum":"0bae295ffd38c1290b514c48d50985d9cc1e6feb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84SCRA9TVsSAnZWagAA3D0P/ir8KK5rp6v7mXjYO2vC\nc8VMFBP7xtSCmTYv52jJknavGcEwGCv38LBYge7QKfRq1qicKjHOvajiAxJW\n7sji2iPeix7CvK+7ZbMwp3oYB6s+BSShIBAEJMPOuVvnU/ZI6sboh+r9b5d6\njDu7SkGPvBOQ4650okMy7XQQjTS3T3QqnuVKIcACj07OGxgRG8lTa+5R92/n\nntLRSfn7xmy8ewBw/YEjO2Cnp4d+cUMIYB5yyKAFZ++ZYS8lEp2q2WSoZeet\nUO3nvV2oNgTqs3k/m1VgFrfDYRNkNohe2vOR/TNiGOBozTISY9LQzwvJxhuG\nV1DY4DPIFH2XMvKTxJzvwNU/qPOgw0L7MVs3zGPQtIVXYWImOOasskztbZJO\nE+N1hwnj4ompXOKrC2i87U96TNnrhVN8qLLCC5xfyisVhm3ciclpJXkSHUlF\n4Ey2toXZ0Wt76Pam7rPTYt6Q9nei2eAKGRSrzOzgBX8kw7GhyKvcAS8DXnof\n2Fuo4exm2YlD/2RhAAw1nL1ol2QuwFxWO34OanT+VhIljDHd90yGRQzxPiy4\nt41wQnEQpcSyzMFfBOsLnWkGX8XtRYEC+ng7UDifWtRuGslBZARbOwo6+gOz\nxSRv61YTjOc5czLNitn7no4t+pdIn/kaSG6CNIY++sMXymAMSf+k/Ehprquu\n55VH\r\n=U0sl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzu5lq20A53SZ8DAb6z7AHYR9GNIJqH2jdaijux8GP1AiBP14x4EqtvfRATOCqPjIcRf9WhD8nrJJ5sECCr0ctoZg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.e01a1731.0_1621872145668_0.9700677556050952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.59174b9f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K4ztnGiNGzY7kU+DJTHAaVvNUOQ4UKPT/CChS7zvFwqxvNN6ozYK47G8hyf2GndVQGN58CqV88/NyqrsH7Oe1g==","shasum":"8de0468852be86d2d50d453df67f53d0844250d8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuUCRA9TVsSAnZWagAAhxQP/iaB2Qwla3w579nm4hMh\nQMn4gFJ4tcCYAWHYM4wIhGxrkjFYJ5l79Q7VAPstypQ8U1fwsuPygyk1OOyL\n7JW754fF+UtDYcMaWMEwGNgGyi0cjkQHvWd+Gp4u34HzHVYrV/GvnOOy2I+R\nIEmjOMILKkwbC1RMjdMo/uX8VDUmmPSTK+gv09sJqyja+VMUubrnOZAsbruq\n8Ju1LtjMs9vPm2waLmRKmwDQYD4Vnpig2rRAneK6QeibTPiMCKvfxpdWi5la\nZ5a9MOlFwU8P+O+UOqZMl5V2gVJUBTUmSXaQgyftaQUSMb80H962v9HtGpat\niVTnppU9om3G7iwmBzk10N7AMr2hYC9qc1dT8WgRcSfWCj0K+e8dLnHdiFrE\nfKAMs1hbXlYTvo1xGr0Gq+8z0G9xhWjoTRm3axk/C0+d3ulN+KXl0nsd6gCV\nQdPWqPa9IPw3Vc8hUlb8YXf4w2ArhrSwW6HBCsiEDNo2m1Dutf1Tjjt+UDK5\nKgEjh30iwVHxiN7Qv/9rlbANagZSPpGaQ4nixMXF5wUYfw2nsRndJGd63vvK\nrYhfESkDwayhMX7vEbFZNzHLgUKzKc+52lEd6oU0WfNELtqAKyh4xlOAgc/k\nahI3CK0t+Tci4Qga/bQCAx3/WpqAOBybkDybx3DmmYCUZkF/WXDrIcfWFTe8\nNZbB\r\n=w7se\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvA4oopKkL/sw+CYg9ANU/wzkJH4mbnXpTGg4o7hvkXAiBXRAIMY7OJqS7daQl7d2m+goGj+z5pvoTEl7aPPyMcng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.59174b9f.0_1621965715839_0.8323286613277201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pXqo9x0pA5J1Fe54884hykY1+Oymf+tzdcdU9oNqJjBJZE64k1yLvIaZupoLUQsfnmAGKqCK42EbWywAoMaFHQ==","shasum":"f930c73f7339738bed0f67f65fbbd8dd4ac99ea5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwCCRA9TVsSAnZWagAAyWkP/ibPPs8Rbzdk1+IAk9sM\n3W1blairMJvvfgv4ntSww+BX5IvI0PqsJ2i+Enj9OXxk+gWHrXA6jcjp2lJ9\n+BVlAuDveYFkhVzRoP1JTY9qPGlq73sOQwIM51pV/Da3kuT4ogvnQHMyIJiS\nZdwfBNJZgKu0oi6r81ws7/ETTRu6cjFGdHOQvpuXDo7mZILLDKi5EjjoNyOY\nqC3SNrHqeAu/EjhAA0+TrsPC3tl4Ier3nrB0Skh+CTIPMCdWKuZHjyRLZHhq\n3R7oIlyJi/XxI7MvVT7vZBCFSNZu/dgO1/nvF1S7eefxLEsszTF3iuXWt3ZK\nkpWNh94eP+fFNYXaF/JRctP0LGZPxN9S4X8DnEvkldIejIKqFNeK8ntyZ4d+\nQkcnV6tFQUzqqWZsE05ptIwY4K5eVSvaUT6cslDegzrqshB21GpMYrmk+TS1\nq8Ka2yrjQ/S2S1/PHzqH+BucrzUF2RQl0vWTQDOJJ3GYk5PNOGKYuODzrapI\nwa0dzqNuAhXyYuo4bzPdNx0mI/9U3E0v/Io8Z8EJq6Bhw0CN0EuwZ6ogsnY5\nt1q/8AMF0P6AH0dMLdbW/KvSN+fyH5QtAwNxUX+Tq9ZrerkJ9QeMpgHyq/rg\ne+z4D3vdWDU7bkRRjVxCkfoO1bYX74dTxTbtF5Mr8sEu7hqp9BpcpR3ubfpY\noQE3\r\n=BWKh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATJMmbBF7teT+ahvJTYFtDJ4ViNN6pUX+5y19htV0BXAiBneLbsIGPHyCo46HfMednnq9sBaUt7JDoiPBJzMlMO4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.c96cb2e0.0_1621969922347_0.4280895865259391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b9b0e330.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eb5Yz9N9YvUGj7ejWZJwsZd7oB6nDcnFddB23aTYZZ0rQGjjmHS2+zSOuHPPeelTIFN4gSt7xSAStNZwqebYgA==","shasum":"d412f18366e6967719c44c5807b8077353ce66b6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":64208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVVCRA9TVsSAnZWagAA6loP/0kR/6+vTP9Y18izknJn\nCJmOW7m3piOvwHqtbWb6TxRvNjcez4p6PKqmHi89jaRFJ77lW8o7jpJ49ez4\n/v6+ErH+ANw41HaP1noWrlDKobIggv3sLVvqNlMQLqtx5LAqApyNfheMrtbS\ntUWGGweawAvusVqVxdCsNLXE2sGNcqTTSMM5x9lGjLAvM9JYKHZ/qL1H1K1S\nUoC3ivoNGF/pgxu1VosVEIXhEnd8Z31AtUntC9Q8Pe1y7rn2fYeBPu/1+yum\n3vA/lXhabD/QQipTmcGHxp0n7CosJZPqbQqUZderAE1gMvS0c3PYbRsjBbRR\nka4voZUJCjF5P6CjCPC/EbCJvNcBaKfDTcKtqMf7pww6nDX7QipEojCQ8xWP\neLLpYXG144ZQHaSljaKVhe496jh1MyuE2GANdvXEtJIgoVHf2aMsw/tou6T0\nuG5ArfWP/m2ZSX4U4cQAE10IXaCiEjpzz3j7QHdEcA0qrJd1y8ytsemjIr2Y\nmTCc7h/Qyl8TuZ5iOQqjsj3pNzeynQXhivWfBpLCHrgS123ajXgE5HqCh6Ns\nYBaAvaVXUbdE8koUnGGwQatdVy3SnFr0n9QQDkz7tVhW1FN6T0A+CzNUjmVu\nse6gQkQ7JIZcz/wV27crEZgIAf8UjBRBnru4o9BnEfBjKR0g4OX7bYxDNIeV\nrmEg\r\n=nQoQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDstFuB3X0LyOKmejWjmrmRF5Bjp/mbTR5AjkO0AUbpIQIhANdsBRcjf3Fu2eHHawtt4m26wuL9oQ8FwWQCMHSrT8qc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b9b0e330.0_1621976404878_0.7700397125036813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.ea2a8063.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TGIu/JL8bDKQgReX3AAnHzhGOYsOsybiFI+HcLzOOvQk9sNNl/bpzLl5BtCJqKjoc/sHFlfxLjgPwqZJ7GgT+w==","shasum":"55eab8f4ad4da97f8483c02b5c5c040ce7829e9b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaECRA9TVsSAnZWagAAROgP/1YOigAjUDofHsCXXc0T\nd9MZap8UtF24g693QQ+FXd2XfZ13RcdJ6DuzZ5GFvfUak5ov+PPkmSXJCYkB\nWi/c3ngAHTBtqBMVniNWDHCnocosT6FPVJmfpSHmT/BZx5p6VXhFcdLNowFQ\nDSgpwIeqAdPXeu6XSYyLjxKD8tovU2dqZBtxk1M7l1BYtztv766ET5WhyYEb\ndquPus1mPcXEUoOzILKCBZsj/Z6QoKQhg7ojAs9tuy+eESQR5ZlgDyg8AqR/\nBRHfzfGxu0g0R4pFmMJB6Ccq1Oyx0R9poT4/Q7r9hVYW+0faPv2nWd9hNSOI\nMiXw2sJMxBQbAVx/QinSaS5B2SOWfNWl3I/ZmffHRw44rwo37D0tME6AONGR\nFlYK83HekglvD06pDsqhN7yHKaz/ksGQJDYrnAr78NOiI9kG1R/K+OwKB424\nW99E/oGgY8SvY2BQ+boJ/emztjM47vjSn2E+PDmAQQU0w61LfqAK/OO0SFcj\nGXFZRHIpZTaKKznc7NRR0JfGw/9K8scHD/7c0T4TT1wLooFY0S4KgnMsQggx\nxUuE6And3mc7+zpalNiy87ipFX48yuhfXAcLnmo+E9qWXYrGOIazli8l2HZA\n6L0h8lvdbXTHYWGpC27rd+bqbFS6l5fWzcNuG9hbAQvwO3RXzdYo7pVf7xWL\na+f7\r\n=1r36\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOukSZ+kk2XqxymSG3H3UKV/rDmHrTb7nSOSuIeSm71AiEAhMy4uuaTGgoxou48EVVVBNniDDXLj7NP9EOSq6XJ/vQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.ea2a8063.0_1621976707671_0.27077423186812943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.60cd9178.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OJ7eO29cj+mYZAlLBxJ7zkBYjTSn/g+JoExFi01Qn4PQbSRmsqZ8K3OTG0WggJYK0pdabCJ+Qp/zcyscVR5T/g==","shasum":"c39cffb644b37437225cb131a22eb7a39e15353b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYSrCRA9TVsSAnZWagAA4Q0QAIvfOBdAp77AXvU/2jyr\nexW9JFm7msiEivcFb50s6gup+2wTWTtbxLz5CnnRGRo7g8WkkrKLq4U2HWNq\ncMcCIbpr8OKuC81XeMeCsHHivOeQyhdueQbil5w1FlvZYsTmOUcU+rzz1y6i\neYhR/X7c0Jyh6amVeJ1+Tk1KINLZsaFFED/PEqXQ/z1doz9iFQf4XDiuf1Xq\nz7hsDKZ6erkPJwfyTZU+L0QN8QDzz6MXZJn6nq3+4IpnbebB7dxJBwGThqfL\nMMcjV7V9drLL6cjfHfeQvFlVTGLewn6qYTzhkOoxwkVGOtQB6UYIGgFcxYjI\nmMkZQ1IEIqe27mVjDDAYkHrbaMGViW2Wl2BXN+nA93cQ9o8mF/0+9FdNOZ82\nfeb2hnSLIvH98K7siGIUcIsTe2XzsL9Viimo2x9aCrTU9awwdBUJDWzG6vPb\nEx5o0W3TTXPbJBoUgD6etE92IG9UNf2Mvzd2j+DFY/4IKO519GofNSHjZ8y0\nj8bup+mmbSkj5XXxMa4cIU9jEHN0SDaO2OOv2Z//RF7JHVmh42PKXJJA+Skd\n9sm2VNU9PGI+VcC47JpMFdBpKum3hY0MyuyNFyWMeMGrOFUJY+KY0GIK/5Zt\nWOSvKRVOUYB1qtFV2zKPkf9KCNcUgZiIszn1jeXMZsluke7aQ6z/6L+2MaWI\nMn5B\r\n=ia6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxUEEfNGThXLXpLQkzNAhdEtZ7ggzr9+ZnjHVbrT+64gIhAPRreY8M1Wc7ZxSnwjzI/1TK70wqmYpi61lifPYASt2w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.60cd9178.0_1621984427321_0.4848340405616085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4BP9AMJnvWh7+wxFtX2jQgPMHYt9eq7FTHguXohHSrr0JAIV3JQY5A+UPS1WZkiWTjl0/bKJxDhZeTIoJjPd3w==","shasum":"0a96454e19a7700bf9d75d378013f40aa22ff973","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIDCRA9TVsSAnZWagAA9pcP/0YVvC+WHBn/+bfjE4a3\n66nVvHfXf2l33VmoiNKnZsE5qzDwGiY2JwTZwZ3q0i3ipvKzKOoGxoqyZfpP\nQyGRIH//59AMs4MyX+D/6EbJ7jG/ALpMrY84bhMc35ehGLlrPj1RUGvaglMT\nqnDTO0d51dM8gwne5O/FW78ysXxqemDKojlnUhky57X0GgUVkt8SYAquY7hk\nvhShWka+P32qX9oETxML6tydEQazYge/ke4kjbnBggG3VY7UrZ5kF69+0Mu6\noQqKL9qEuKLbBd5GJtU4hCzGgxF9JoK/9XgvpHXRPyGvOjLrb/P5ScN6ARcn\n4LcSnKmhF+A16/gVsKcOIyHKk+wfdYMYIpXF9HyRc5lhP7rAemYGcHrEY/mU\n6GWo+DB1i8GRMRIJV2fw35o8JLObhRejcDeZbpayud6EfX1NbGFBCDyRi17e\nGekmaRiYRxzn4ZAq4O6nlVWg2wjmbdrjvkJTfOc4xAv6LPZbTFAYRw9uyO3U\nUxceINBFUVbgoS82SSVHi07+Y08W+sWqbBD3dS6isbSkqWb8hueTdJGdobfq\n2fSN8z3slF9ZL7tl0GWWuKWSx11MpTkubzEOJ7XP634fo20fNFCvJ3vHkqUj\np4h5PCC5xlpMUGPpRQkKA+hSDHf1inzQW1RsrbfDB4PzanmI1llmNZIQTm3r\n/ZuF\r\n=CM1y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1lKa47n6hZ0tDMNBUPgrhFj/30ErHowJX7S3ugnzn9AiEA+N3L1WMymUfV5T5uGKlIABdO9hTyKIH4bxIBUH6Wg8M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.2e2c75f2.0_1621987843530_0.3539042175832414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b99c77d5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OvRWe7QqDakwq9UwTT4KfDVsXrkvlVla0z7HrNE20RamnnXNZ9NWxoCksL/0ZRvqaOJnBO+k4LXjvLM3kkOeww==","shasum":"2bca355a77334ce4e2115f0522cda8ae0a7809f0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3CCRA9TVsSAnZWagAApRoP/A37KvFfnGUDPKwau2Vg\nvl6V6tXqugAE3rxUGH3kChpt7ITIYe2SOU7q/zJe1rQb/awKlg+v/ArLvocE\nGogSWqTRgR8KRpwcZIC6Kf1YzjCtb/mWE+CZF+cQX7YXsOM3ewmgTCsqbaMy\np56WkwcNLTAWdR6WjBcn/I3zBQWycGkaSX0+9zfx393w+eW17sXac5P4lP/8\nqYzQYfgrM2mfR/OhCzicoVW3qxLjJ3OQeLAjwaVmXXNwriP4zlzSL38pu7Iq\n3XisZacHvaW8Y8Q1VFKnOdwvfv+5otQlRk4nhriJmaJdefpLjWMe4luPaSli\nOuRH50lI3CZ+HA9j+WlJT5dMvV6YZMpvEpFWoBYDtsNsXjaFlhKGEOqdFIj0\n/A5X4FhIJv4y79B6eJCl88zVPSabmorqrboD3+AEvFPXLUgTWaIYTE7cNQP+\nSz1ig1X8VrlYZc4aEZPxfWqwzuxpvcOdTofwFcXzNodF12jUyxHOzKmU0fX8\nFoorpt/VMlWdv6DVcjUsg6bk9JAGYiPuI5XuvfFvrYVgmKAnDyeghueSQGyH\n+RjDLL2Bt9gRRQt9QNmGX4Kd5b7FKdfMlubvqn4IippKc/R983rfSzb6zyKc\nJHINCIRJh3vM7TlC9Cw3m2zetBFFAyoxcuBTHcPGOyM6rRcUXXhJTT7t0gDA\nqQTC\r\n=UoRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0duSZT7G37hBRHgZtja11fIy7tbbYIglyYmAJQV88hAiBED2YIv49HIwUOLyoK8gp4sUZksBm/RRfDxTZsdXTVlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b99c77d5.0_1622056385402_0.05148838555893409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.0de82c12.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kZsU6oYnhlK8OzJLDIlgLC1welACAvNOwmAzjQ79WHFMGhRs+BhdeQC2h+5OehPy719U9P/OTB4awo5Y+ZPKwQ==","shasum":"b7ca2ff9467863e11c86ecf64829985bbd77cb05","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4ICRA9TVsSAnZWagAAmo0QAIWKe45iLI7MdsszT4MA\nRsjVPKmTH31QGo2vhl6KP0hpeN8OnjDMmg1Pch7EnufmxRBy3zLEcwv3EL2c\navFgq2izDn9OeuYRMNg2hh0U2E1nlic1ddiu3tnr+w5+vVquyH2a2EfTHmVJ\n3bHDyL9jcsbnc2vsuh0qMldmKh29grJBWPuL8OdePfQismVSNtqMy3h6/CbU\nBQWADh0DIkMnxyTEYedQOpmERVkolTwfRJ1t9e9aPdAFh7oPgcpBAiw1srMB\n8scw6TTOTJf3qRlGxq6P9KZu86inhhIGSJTFh9nou96BF03InbVKAeit1sm8\nz5p0Fv2otgxEugibXqQz2EyzbFDue7cBdDDCkzdy+HKVDgDOmLb3borhkzl4\n1MFhjUBPdCDknY3PxmD77n79Rr1lBzK8PGq9JPq4qFVxNlAh2kDPKajc6+xm\nAGP98+0QFpznQxyTW6rt82t2jxtC7Y2GLCPDagwdBrHOgkxys9J8KoRscYEK\nM5xM5ycM06L794xtCRQH23rI1uEWmiXxBYIbBccHQyDY/0hRT1MYUAK56t4g\nbiQ/f+LKL8QIW6MDdr2Q8fNTQsaK+5hnJtHyHRtdfUCqV65b4h6F943H1ya9\n1NsCwoaVKazhkHUft5i4ivAsB0LjxlUB6CuiA/39QM/ZqwO6ciwn62/68ymR\nylm3\r\n=aB+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCbFm2+HQA4GnWqdaXcmXilxcmwk9YWj7U05M+KeTF6gIgcmGizf2Inhh8geqIvx62n+NORCNiLJPXulvsab0KoE4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.0de82c12.0_1622064648175_0.46758037819988574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.227a4614.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-68E9veFnJ1fEQl0anhhhxG85XKh69VTtIlJzpDil+hFTfMa1qXV76ZmWZsqeIAs/y4AaKGoIzbVejO7GYWbUeQ==","shasum":"149ef95841d84b21335bbd3ee0baa697fae17d51","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KvCRA9TVsSAnZWagAAKywP/jvRkxZsufV6Vajtox4x\n4q68KDyz8N9EkRuxFq70L++9DORfrd4+KqtE+R1MgWR1mV98el2HxMUyCpTU\nIC3mx8d8y8P6toV9xH38PJCTdJyTCnsoHugOiEpmhQ+kWTueaY5nW9Fo/cLI\n209nesaHw53ff9N02hOuEUcO4qwDIt+BMmR/JpgAmxtXIGQYr2lVRDq4vzyp\n0GwkvXPXbha5TRNrtgJlnbJfNtoFxQebdX0RnWwG9N0G5R3wf57yJtpxeeX3\nYqTPtatdEy19PUtrjRKMRCNeWvpq4dRCtSvc29fxIXJz+KvAvbVVWiiYYNXE\n+KnZHuHdt5HAM24sLDT1pFM0X2RQYNkzFlZQrwPhJri90SWP+vkFV3gxRUo0\nnVZGBfprnTph0mhZ+5JvVf/UUYk4s+oLQXvhofSh8h6/poYxZI2rP6GhRDVO\n52qZXyj5RIY5G83DGjs58vsEmymrAsmRCjjzyjSeTwh6lf5TiB9l1UdJtljc\n7YtGtE+NgfOdnduUlMKOR3n02Havj3foFAVDIn//5Pj8NuZUJy10raVtQBcZ\nUzznMy4zdFmI30sfiXqidN0qrWb8BTeHRbuaJ7NxTA/7w2x2dJS7diwDF4Iz\nlKaH5vwDukGKLRp8xxc+jxM0lr1+dxiPVJElmqaYSvyGipiWbpWgsYcDoeRC\niGXJ\r\n=xHGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4Ls6cbnfaAzblGomS6vzRJnxIVq/IVKyD4x0MbLKkKAiBos73ocdte2ILeFOsTbKYj0GUa523h3SasuUB8BBsIXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.227a4614.0_1622131374706_0.8118511533056658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b3d21d31.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sDlqw1kGk4lWw6SyjIAi8xrDqM5NVMnZB1bcwG993p2Zc/rBe7dorSKdGiIZ+drAXD3imqZSe0JOPMl5kLbO1g==","shasum":"1f1736e9ab8a26183bb738529ae8d831caf394c3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+ipCRA9TVsSAnZWagAAI1cQAJxMXUH/aTWn5D+S9B1W\nChoWiUqe+LYDB4vNnf9/QcXnMc1j35zYfnJxjD2ehchpcbUag7WuwpBaV0hG\n6oJ+HTggLBrOIRMm+KgnoKtny2haKOvSEt1cr90T0fKgDM5Dr3TIuV7m+e2t\nOh9wWu/djXCNTPuto023QUx5L6ujKPMVwA3f5QgrJlhCvGdGnKomHWh5rVZQ\nQRBbOcWiZT4PcNsJbtlbEJlTWEYOZ4jTnvy/uNEd1NU70+kGbxmueRX+fk3x\nsaOOUb7iybPmnolWCM0zch8Huil+M/DfBlS9LAh40LZror5u/DAf1X652G4m\ntRhccYTek1ny/s2Oze77OAe4e9HmzUihD1C9NcGTy8vvPyriH31TsF11MfDr\nfY7qZf1xVrbUIMiYTyUCPGgeWc1/RUMLXRYE7KC44mF9FJ9TfvslCUhAm0fI\nt8vwnvcHPfDBdpmr2YBALAyy7fgUgI2c1UwKUFCH2gozNdSQ1KuIK88xlxax\nP66+FXK6wRoiNWDZIkbLmVasqpsWALbKTtW17J0wIXF34v8/CpFP9rg0X982\n8kS5apHmf5JoIZVs6uommNRfb3E3wBPL+yx11sE7gHpZ0Lw+gBrN5++aUJ2O\nu0UYQBCJ+ErH984xN5ri+xy2MfXfVh2xSKF9ibZaA9JvJLAfbj03JA5RWQe0\nb6mY\r\n=a8aj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBRwtAECGu+8gQc5T80Mb/47z9vAD+WiAtITQMv7BPsAiBcE43kZG8ZQjfuqBhZCX4LZGkoK9KLVQDgjW2lhJOOOA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b3d21d31.0_1622141097290_0.941415927169341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.288c33ec.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X2ps+zww63PW2pE0de0lY/EzP8RbjFHOD9DPzUXs8NbZTH9DygBkcXdS7w37OzyhozbAeIJxy5k4cpIc1jpB2A==","shasum":"db548aab7ea5a97bcd1e62991d030fc94c46229e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zhCRA9TVsSAnZWagAAT9gP/jnydrucGtveNrR2z5yF\nGR/VBGgvtzbRyK32Fkyjumi55WQYx8LDMnpu3AnJTi7OqflJoG/XRBkRdCqU\n4y4IkiYx/4tJGKmwt18rBQNQ0QTssSXUwvko2zxwE1gc5sAkqFfT2qJDj3lb\nSLEBuSG2GF3gfW9A312HdCr/HEpMVu3LrPSjzJh5/OjWys/coh5y0UbrMWTX\nFv1dvH+qLDiBbFrH3899ApMHj0ZZNtPnVTKh6y/gOc5amKzoEQPJrCIyjVI5\nv79CeecBiwONaD1o6MpfnPbkWiZFietZ0+lYSbphTR1AiNqg8RHc92fmq4Po\nrBX+SCvqIc6hZGrVLh3pFSpGSNYDmlb+S8JMFo5CBpc8suzhTpRM7m6Hs4Cn\nQPBoM2HyZpjH8wsqJQRsXo5ySZV1RFG/KyctNcst0v8I5m/V+ZK00J9AWlh5\nJAw35pSeBtCbEnKXkSEFntBwI5g6pPV3KOo/aiLox+7uoHXqy3nP35NZ8vAF\n8Vys/nM0MRVcYuj6ok2brb1nTTpvML06mrs1a1KFgP7h0bT97WEtFKmqOc2P\nfsbwdaKdOOJV+HLJ1UhL8JkWSVn0bM1fKxHUum7wEv8u/cdWKx7ffP5PuJCj\n/mjNEPyJYzW1wfKOmiWcOv2VHYz9t/2txb+u22zPZzhk0b0DCJFvk3jGjm7x\nvLfl\r\n=nzBN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN4fOQ9LU+6NAf9pZCUvUJs6BXDQrol6T/0cab33NgRQIhAKTmjYb+5njZfMv2IeyhKm5VFlj5rsH/aUk1kraoFTXD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.288c33ec.0_1622662369153_0.5573943034370243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-daJm+iz0OzgNpFbIll0LZ6O0JMoJwPtuyG6C3q8eZO++V80mPfwduqsMFgPbczzdotXznrASMW9fgNW4n4vwgA==","shasum":"2ae23f5611d7a064fd46144a00514e8fb371ef38","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOGCRA9TVsSAnZWagAAuogQAImrqIL0vlaheTWxliAL\nQO3KO9DlKHzQna+JYrsgdw5uieefFiuTSX1DVptLiHzHbHOaaruULXXppGh5\nNuR/opW1xt3TYb2L5jjWW7GLuAneg7qOywJfRTOHNOtoIR4S7oVbv4dSmRTR\nmdlGc3lqa/5VKvfmn5KjQkEZYbkZkdBk5qd3zrJ5k+PV/7r05/zmkW8AR5kT\nKuDdLl6kAMNNN2nNRtNRDez5O8u0rtnbQpAVPJo38nYnyT4N0cCSlBivoMga\nUIaqd0fci5UEomhvD2YoptD8vOkQi3GyF77azOngKChsic7+K0a5qdJS+cFU\nFCka07i7757xapzJzmEa1uOGzCG2tYgnLHFPf0sADvgi3kEj+vPBImgFs+O/\nvLYNc5/W8rJ97LBjxssVyLlo6T5rsrxOiXH14YeozgWNpizqLDPa8MHxAHUH\npauDXrUM8wOrzJ1gZeNd7ChuQslHrBN5ueZGhX+OtsEAsaAsdrnHtIbx7w98\nUZlv1DZoRgN55/9eZDRkU6DuP76+IPuEfrUBNSJqtvkkZAOoUHvJYaPrNzYd\n7EjHCVbXR8ur0IBi39eRHVBEAXLSGSd5/TdS/OiomC2ArlFomVLYDH0F1nSo\nHSsuoYI0K1sskYCDeFwCbcDRr4EAM5Uyh0+ZELj5e8akke3rJoG5EU29trmX\ntUgA\r\n=KiKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYAeTPDDIHoxqY4C+t61ibRt80RDlRoztwDt0APU0nIQIhAMLWrtrMrVMLPSZjlQ9+WqN81E/7yQpfSxlT/0Ai3C+I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.7eb7ccb0.0_1622750086283_0.6405260930526613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.7fcc0726.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2QnUisjaeyeuKZc3vXqgfPdAX1J35oKd2CQWeVVLKnAT/G3/CS1bR6FNINrW7SfsIu3hf/wVcQv6LH/E9kScyA==","shasum":"3688df521e3e8d705532fd4284e1ccde08f8d3a4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2YCRA9TVsSAnZWagAAMu0P/0zjaZ6SKpq+M3OqL0Vm\nr9HRqBf1XcESpNJ9PvlWg9CEcpszYlpdDN55FEPAAFyE9acJRMANOgLb1H6L\n3v1ApEqCO6/IAW94B7d++KZuBAcGMPBLJdwG/sdyrBCjy8QW5UQdUP5m+qPX\ndVRcsU6fBM0pCUL39DpgXMzO4m4oWasAws4+1s19pW/5RMJgPSuYzfo1jcQC\nXsAeksT9+lVy6D27giIY2224iGUiFArZDJcrYYkselJshTFMBbcGSRDNqU70\nV5iFrnmIi2wMB65SSuowE9VcZVuQWq3TIJRdxt3LpA8zDwS3XrpZGgqoJd5s\nYCQCd66j8/jE3TJY5UbC2El7/JIvklgg2x9HVrk6LrMpKZ4bmTwXkbl4kuGR\nW4As8cblmUjrGO2AfefY7Y0GB4/buzYunvwbMpQZCnpJeHu+xUz0QU7QeaY5\nCEhNNiihr38dbIAYKhlv6SG3pWDvQo9Ml8xq4XnrKQECsGH2euKuR9FvGh+X\nEcxOJQYOJ13KP8MOs6M+o8FcaXNl0IDrW/MYTsO3JzRvh9u/TKK4R3w/8jXP\nMAImND8uUTIlowEBpdzcE8NzXQ11OUnUBvsWbebWqkHxUGl+dPJafl2lSlHG\nJCpK54K8z7RcutxitvZKKIf63Eh2DyjL0VA/rr1julEpsQUS6yD77NX8UrYw\no/Vl\r\n=TAcY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC7zCrn4WRYgTPfPsN0LGy/0AduyERNHrl8sXnjxjn/AIgXfZo+NuMjvb1IZ9qtrVAoYV1K02tU84cEPHgc95td94="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.7fcc0726.0_1623113112681_0.0942707636634299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.220a4e5e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7mzMa93NKIb8wJLJeCACTQOIhWzAnNJSEN3ppABm+6uwDySQKleS7yDeJ2Vxwb6Hk7NjCpGl06n0jRyAxNtqig==","shasum":"4364fefa16d945b20e081ec4a2818fd94bd491d3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv62/CRA9TVsSAnZWagAABXsP/iNcOBkuOwLsguh05IH3\nZlkVO3tcmWiv8sFdPg33+HyNEKwDF3F4Nlu4ayrE6tj41+vKCDIEOBHmSWA4\nVCKCC6CIRfbqb2IbdMwV8VUqTP3i06FeCRPgP2SDmopSEIvOjnlDs1IvaFSL\nLZ92OQ28IOH76haWIIx0o/3UkdNEFYA02ocOyYsvSjBLfx6KMRPUbfETnM/o\nKX9OvM+ZYxH+6W/pW3k89HtU9AS+CKXTkLG5hsJ1lpqwQ0TooTsDXNhN0DDQ\nzDr2EwIfhag2iZ5BvS5OKwUwMCeC5s6ZBPqil4iytxZDmFEkH2HHCd2oKvfo\n2fbklzC8oIoy9PEU/mZG7Nuktq6wb3z0gORN++FV/z6dcmtLz0/fvdHoLeF6\nVGdgBdsoGJ1h+KdiykCQCf092FAiRr6qZ/1Ns8bntMhnCBpQDP6Ya+QMoGxm\nygkIV13kHvMaekCVligyTrg0Iut9mb7P2mPpN5j1OXfrI4quaDYqgtatBwFG\nMCP16TMjdm3OHuPE08IKFtTUmYBkqLwo+lMMaxfkuTmUHZRTpeBW9OVVjMY4\n2yYP0zCGKcXwv80cG4CpdELcFW92w4gr3Y2VAWwJXqQFdkNgn1/k2yR6Kxd0\nQ2dtBLsriTEZxNh3elD3znFaND/cLoU2bskye71sVFJhqnUJa7TLrStbjM9l\nxNqo\r\n=x0Py\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDh2BCLK+WClkqAyjiHM7fmZz1NRv8sPgrPRZ/0Pf9R4AiEAogCgTXDWlt03qQ+leK40s9gotr8Zs8mNZehTmL7qHEA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.220a4e5e.0_1623174591703_0.29215108181081484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ivjrVT/TFdIAkl179iQMnt7Q09v0jVsOS9MiP3RgVCUatxaVIhTE2lwFXlL8VGAQTH4CwNkYqvYhhuvYLjYJ1g==","shasum":"d9322e919d74d17371cfa31cbf100c3618278c89","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7iiCRA9TVsSAnZWagAAFsEP/jYXHs6CAiqnb2i3IPJ1\nAElX9D/NpQFqFQca5qpysRdxrANzPgx8vTZxtcZ2v5rdgP1xOhHaFKdqN0c6\n2Lc5ErDR2JRRG5PWmBqcCIPu5zzOUhy7vkh+Cqcfe6EMxMEPAGbBAMix3jlD\n/zDWpYurRcXB6WiX464Azo4j3gqBJcHr2aSqqnGd/U8D9iL3WIO82FAmXnBq\n9HpuwwsPW3dCpUuYZiQBzL/AKSK4cVhVDuJArm7NsoL8yNKbRPKgsk7KJfPi\nrWGIAW37DbJv5mNgrwX8QJGA7iD0NBmg4qjrPInNaODie3afN4GxgbQL6jso\nrJuP1X88u9LiFOJSvYWvTI6p07mGhWzaRHjq7hZtFrsLEDGUgq38y1pyoT4h\nSaWY1WLgcIWa2VqXMsXGLYgrqNKG2xvg2FecG8ONP1PExgd8JddN8ScJfrBK\nqsddhkmVcAkNHEIeGN6fQtwd3buTJVBmHFePY5TY67J+UgE6KS4jFxuApTv/\nSKQLc/cegte6x2sshmSTBY9iT9xQuysZXQM9FoPCOXkF3mip062qu7NBVBXW\nKQ6MdOFkwiumBZalRhZA8EIM/hE1nldev/vgP317J9i1gPLsSfL+0SWF3yh+\nEKsP06JmSIGHK8wmhLJFVvlcWq91RuYxAv6lPAWoPY8WF0s5F9CVepWppE/X\n5w3R\r\n=fb/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFjtErYw3jnp6EL90Ri+I+JYAhLliQo4Zu9CeVZvQWVAiEA44Tj/vxPkILrg/+8FEFO74bS0nKtmPRkRE5+sFfaeM4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.6b2d6ab0.0_1623177378713_0.3741601236579737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.2b20825e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mWIQ2XmOzvmYhKj5TBLeLG5DhyNsIP6oNANwpUelP6ipw7FGckk3yqFCbumsWvHuWBm/RK+to483N7k+oS/mZw==","shasum":"c13da529b294eb97626b3bc2cd2f564870659f7b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZfCRA9TVsSAnZWagAAj9cP/Au4mjuLlGPoViy2Yi2P\nJp1Iz4LjJBcApx63cWoD3K6dFajRHs1UuEurF7/UPs6W1EgnB6Cr3LtrwHG1\nOwQqg4knA5Lm134Rgg33qL7EHXkzR+ei4lNIOW4lOc8W19Jh4NP85cqtJ9ub\n6OeKWHL1CyZDPKdF+sSLjrtVhyYdLJLqly+uynDzj+HOZ2bozwu9tUMkPxde\noK5zkRcCr4CmdOvtWkJ9ubX2llT25w0WM72hhJjPDf2c7VzDgv62rjUTi76x\nJA6i2wnRl8ZWcGAIW3EcJBCKZjyUbVoBXC/b1JfZtMPeyGbke0Fd3/Z3fLpq\n/0cBqd0i7p/SWUDzmwvlKZb1UnBF7ASvCHnQ97BLwgm3H5nS/0VI+afG22Xm\nuEL9N2U1jgezXt6m91rnAT6nKQOPrVosgUOyu2QFrNtYE3KO+igzgmHC6e/v\nul3SJvxVTjqGInHZ6Zmi1gyZc40BPGlbZj6bNJG7XR/CAvi6WIDNQKFpyNIY\nokIuCzoczpfqxGT8lpXIIRzlyia1kFtNMrPR43v5wtZTA2p+9/uvFtm/CBIO\n5NpQhYFMNCfrn9MZXJl7FHBC5suU4kP2CaitHSWXg1B3YHRBxoDdcMG+zCZc\neV36clKFnuXF7JDxPYOG+cP/eQFHDxMcB1R3054loplQ1q1l9A/pc7pGdSG6\nDff1\r\n=yVHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCImxmo4d6wn2uqrAjZMwXBuEf9pq2zSfrj7yRiNvExawIhAJrHyOjKWhePff88VJa3dcL1/5E1Yngz04vWQPUrtZ+t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.2b20825e.0_1623455327216_0.7988848929174501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.e1511867.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zHiEwA1LtBkFcB7RMsqdCxJpUakEBMvMvm21QJQB8u5x3A2dtAU6GQf/uU1sbmFhokvPAEcXK6g29OGtGf4m5A==","shasum":"4b065e969dc5887e6ccb9437ff34256ba91e91d3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZfCRA9TVsSAnZWagAAq4cP/2aWdEzPvKFu0jzeEgDf\nbMryLr4Fvyz0vbKP+Fw/+K1fEkfmycwUQnyHjNB0z1m+bXTWu2009QrLHPUH\nbxa2ogs4jE0TrB1iR4zeFRZZSLiHGmhaR+tKIf3lrzDRZZI7fng8OFLJTkzb\n9JBI7sKDconAdV3pEyo2EgHFddDnV+/VX/5EilO2mmyZR2P0l37AE1rzqLlY\nMq54TDV2lbEhglajO/lOm38XmkudRPxpDAgtcCAcGaUs6QhPUfSGDFGjvBIE\ny5zWaeUofPRkn4Gs5Nw61D1f1mMl/vMLJSHbmIruYYxSbf0O1N+iMuW/QmK4\nfIAbj++TOqvW0HHgfdw0jVHWyEH9EPvCDruCgAyfWXHdBUfHrhCdzskVW6p/\ny3yh9R6a+6DH2WQr+tZLN4WjR3cDGeQ0ZtO1H9WpNl9BXhOPTjRXwFjLvxXJ\n3caZ7M/pB9yLCqlCAL2vN4JTkYuL7z87wAEKJgUiCDBXwEdPTY0YRchoRdVb\n5dSsVbsQcs3eX9Cgp5v+1pRt3/5B8FIBiUhJoAD6UPMCBIQA9aI5J26cNaf9\noIqsbaYNNPd87N+uft8GQH1NukPF+IFfYDLNa+OcGkCmJXTquhkrBlBUpedm\n1xjQQRKoLAcYoVuLP/4TGBbIv7VQqUZcuC1YsgwiRi8rvp838sceuWkRFJHK\ndiaY\r\n=vIm3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzz9/NpvhBHuFAUUERJ1qCay+EUDvx8bvDUIQweRk7EQIgBhqvK4UfrB/wmo77HBAzimPmNppxZz+W69nPnImLH7o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.e1511867.0_1623459423136_0.2893384666124268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wqsJpndriJHRBBPFeLvgqOHoeXvKckPFbgG3RHm/tCXqoYRV1EvoRUnT7YUBiEUtr6FKMiJsUv7YbU/7vxxXcg==","shasum":"79605fe244366eba32d6013c5425493d68ac6fdf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTGCRA9TVsSAnZWagAA+8YQAKJLi11OVWLgfVnwclwg\npvOWuf8MYdt5Be9qPj4FWLIIgdXLKStItexx2KOH87O/q58CrC+wyaXgqIiN\nNzct/4MTsCKYe3anlmxhdvK530oaP97Bx3Vxfkw7ebpBMJA1BQQxCLPTZot6\nQShn34qntM6ABbgsIJPgltYaw3Yu9pMEZzrg6kCO/irg4e+oKr78aSnhSQC+\nbJ5+3uXRL7kd3r6crNRD/g5UH9NhNd7HjZGj7B27c+gudxcCCPduAgNzkrQ6\nsRiWy3PX9g2ZsY9PPDhetvjNJk12B6ETZyz1XROD5LsQgRtJEptJLvOO55UI\nrnO6+KmV/rrZoOlq8pQ/xRMb0uad5Y9w6Vb67usSXAKGt1hd8N99oXPRcFTR\nEtfVB9chUUGm560ru5K5N6nsVDEM01kLl45NASBgp1hVFSbj/+J3egggW86U\ngY+X4G9kRVRaPAD88RgEzmkL1ssJ0e9faLibLmj4VFKWNlaUEuLZnHQRHd47\n7kMHoBJvUj7Imue+KfFyuURwOTf2cO4zvtXjgSPJmqjaoQIxuI1trd2/4+DE\n+GpDQy8qqOzVtpIElnjcEiZsEdmBPp4ErsQI3R2M5vA8u8fc8saa44CqIAMn\n8lgq945KOXkdbFFx2p85rjs7FZhTe4Hl0S/CZBCZVhEd5QCyJwo+3fsPDU/1\npvir\r\n=yv4L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6ystcGzohNeGT6OANUtskdNH9c2wbToZTqkNJYf656QIhAP5BURae0vFg2ajcTdSBFQI0r/hEBooCprRizi9kBDjq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.ef4a0c0d.0_1623786693881_0.3031484940421578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.573d8913.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fmPKhLvFuq/6owL4PCMkgi2p8+ssNuB40ABlzc6ihu8r0WZPcMD5xbXxh96p2JeCb3x17MEQXtRr1OPAwq7QTA==","shasum":"3b90ee10ed87034cdfaafa32d329cc833386f9eb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSuhCRA9TVsSAnZWagAAFZIQAITOshh0WwaIBO5eTIHx\nUY0mOs74yMWEUZKvKAf0dqU8rKmVDj2WCvpPrJRo9O+VdMD3DdWyGDYzpkf2\ngEqZHP/kD3XPwNkFCce9gcioEsRhlarvcQfCLNrcsdsUtBpdV64AhszPcYPw\n/hQztq4rscxW3BtQWjR1C28bahkJ7UvnN2KMHLJ+38KziX3Bz3kfPDxST2X4\nlFBaUywN1emJFC2+8caaTrUdMO6cFkAbwF8IbS11AbDXQn3ATdCMh5M//9em\naFjpJiLZtfoZQryhWeKIB9X23/7B0/2qXSdb7URtBwRpNDvsuxsyTqsPg+P1\ns8EbXMOaR/gzvT1hBSGY/1vNFNd18d+UAkHNzfe+koJOgW/gLTtg17Kvxte6\n/BkkezSKNTryWDudeB7R1OlnbJ8D5Cz6wri/PgtBIebs7iK8s54h/zlqT7n7\n9mcQbDXAk4yR2NLdxQcaRobXj7qbfDoYzrT7y9oAVgQSKSzQ+DXSngS+Cjl6\nCqAaHEptgiBTKWIfm3yT3skmnt9kZN6vd66vF5MOMeV3mcRrt1LZvvaxQUxL\nqiX5PalcjkMwjEFPcBvnZXwY0mWPuN+Pwa8ee6v7q5XRtIB00hRvIHzCEL31\nkclyMMPvcEQpWlCtU2BByjDrGS27nWcqmRQsp90aUjnKgvEKhnWNWKECwMY4\nheZ2\r\n=TUot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdZcECTbtbAnntRu9xPxrfq78ml01CQifBIDElUUQkLAiEAifY/6vPvlsTH7i5IMNavHXzsC/0WpD9yftZcVG0BKPE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.573d8913.0_1624058784819_0.38080775847976644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.21dba001.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZInyrxUJDN4Prbdpy4zb1dUcojkLp7lgsPavIgIOnfmgrXmVyhQKLTtphZZsGGAAetLN83Pi+w5MpTmTqzuu+w==","shasum":"7398eb1c9d81a0e82e3ea8d5ad61360d80851993","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdACRA9TVsSAnZWagAANGoP/iRV2dc82AEgdxilPEj7\nT0p/uAs7kfZKiWPtqUDPCNrEe273//9woDfXNjSKC7QG3gA/jxB+2GHLBugJ\nVrBbaAdhTvqMk5Zo5wbXIZP//RaojOZwqm/WZACAFxABBSTZyvzPh9gtytoM\nvtf7a3vVtDtzq8ObkxYTrM/ghrd3D5SQwHpAGwWVekF8t8B/o8pgg7n/b3rp\n7dVDxVNs9a5LCrH2bAOG25aSMy0p6bDnWlFwHOEUK+0smIBlwElchCVP5Wft\nND7HQiOZvVn4zp8JnZv1OQ0ao8PBvM9OVYSaZdR+hBlENPt5+QASeDS/3s9k\nnWBNWQqyy/o0JO9RayCrFJXcnpKU+Plhbe3exrY4aJoZidLY6sRGBGb5Y6rt\nDZiegkZuICzhNCKJM+gYIs76DRimil3wbh+Jr2yOSOizfacaP4xaljsPQUbu\nTq3/mEKTRmA9YpNPEgTug0k04zSvsInjq/rewGWk3x1U4+qdzQyt0GBBgCqL\nZcm+RF7+1fELUakG/eAZqZuczuAZxjXchjrBa+A6RyyBnvWhzli4pFV3rYFm\npa7U7eR4GOw4UYa73n28WWL5nBJoYTwzrN2F2Q1n/yI/9ch/6ReTrimEFkLG\naS3ncZT37Ckc6BaVII0IPULWTe5LjStZcHx3QYTtkdIFsr+A9Iu54/u7YLIg\n3iiM\r\n=BWuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTin6PBxfQLUvdUpOYcsRfWrrhEfV1nDWdRhL2+0oldAiBEEjwfbM/746kFTfOkUcHVZC5VD3eO54wKImJ9MvyeBg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.21dba001.0_1624311615701_0.7277626418817327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L+et/SI9N+uFEeHtoYyB+Ldl5WiU/x2msHCF/SUJhZf8VhlTHcCALsOjVNCdBM68CjCGOvTnEixmAopoj6haKg==","shasum":"893c6cd1e685295e764f0f599a82306b358cc7c3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q1yCRA9TVsSAnZWagAAuoIQAKSxSCDTn4C7oh8agGf8\nG1+FtnvgnzFPv+V48hZoJbeJ2XUuARAOJUoEBf59XK+CRCu31CpiVD72PVsM\n5sBSWEORNKqnfbvENGZihbLQjr4OlUuieH24O1h00uuQg6d4NUQf+Rod4XPb\nieHHfCiE7E1XlB+i8W44X2sHcUUTbzO0/Q+P9A60bR8sz4C5eAuKaiSl7RIg\nnp3F1UTiyMovaNNfI6prO/G/qmR24TYwIeKdlCTyLuBi9WJSq7BUzMjaOCUN\nLfPoVet/hjzpEH/DQv5AkH4vpYQfibVwmhHBow/7vBIYwXXZzfe5c77bqdiv\nEOcgl8v40Iqi8Nn/X4aae6UqgZYOjk2/7sK54qGLRi3go743py9tE/NiFdT0\nI0CK1KHkxM9veTSEl3GHzecp5/NBm38Qntf+dnm9yKRPTcvEC6XkFQCZgAI/\nRg+scl9WHlKVsfvBLhxrGNYsiyt38PIeQ5BpEELgFwX0bJbukK30UHabvSFB\nrj3vUdnZbxP9JusnMhkOUHOSOXejXBnWFWMmcL/wQNtyHJksET8DvkRuT3MH\nC0j2wyAKy4qTAVZiGu98T5LCZGqttIKXuILSkhz5av6lW+DjxM13ozC4U3/B\nLLYHJo7D17TlYeGXjXw7J7igmD7a8W31Jp5dHz0jxvEm6Hpl7alrajltAPFP\nCXfC\r\n=iem5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDKl65ZPIW2pTalYicRSmUGBZuP8BvyAfMYc3t+1GregIhAOCS/hnGrsVrCbTjY+jj/AG2DYXp3f5ZZEzI8DhtFZJM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.6f5bfd0f.0_1624575346172_0.62571082641496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.fd8360b4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ys7C2Bt1qEw+m/r+00zeFkHA5peYqGVaVCL4+AGwyfqapt58VsOKM3X1Pe56PwZyPWp7i6UOrGuVsocS6vfOwA==","shasum":"31151847e280af66de92b918444879ac3359ac54","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1im/CRA9TVsSAnZWagAAEFgQAJB/EbkAsUrskUaAhbDa\nay5lhdgZ8cH1qLAoBCgLcvrOANEpNW7K8qy3vpczYLCCnPHw4F+J6LoSdZIy\n0XIbxiuRRiBLwNi202RcNnG0T36T3BSGUx4yQoCzQW+udexKsiQKCkREMRCM\nExHsSzQkCB723QHlXiimztht16wsRRYj9lIRNMAbfsHnuMyCQutFWz1AJFoq\n0qRiZ7WG3gzQ6mljYzBEw1FgPg+6xaM6Bdgm0uLtDno/LCnZR7H9TL8Fpz81\nXcw0TXLPmkflizcOM3LOR1znmYyVaYxD59i4BETTpcLPa0m5yMZH8wEwvMSw\nDZ4PXbZbqSN1CLGnrzONqBPMAV6crvdGJiXC7HFp3a6R+oDCuBGHsQtwKgdS\nqfDPWq9wua1oKlweeDSrw6m+UKdwhPeC9XC6xWheRRMFBsHfNFGfMjGNISke\nzFgxO5nXxe7Zb+YP6RrXNnFHcIbZubfjd8kW1uyev37d7eQCM1PBAK+3j6uR\nhaYKnEjX24+ptlXhf4xPAbaWUKBEoOE91MXiKOManlueT4d+Hv0pAted9cay\n84U2IKETMkmz5VFhWzT9W5Th0a4LIF95Bbc6p2mMJEFWBaOctHCG+R0sSpSF\nt8dW9ZtWhqwDbbHb6JfLdKc2mOqHLHTKZS5o0H9L4u+nPrTojG6sRpNW8hsy\nITON\r\n=un5w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7+gaE27oNMJciIg9gA8XLnGwK+GY0DZYJWnUY09qOQQIhAJNpEToXlwtRgD942drcU3yaKA4SXVuUH6V1I0rcylbA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.fd8360b4.0_1624648126600_0.2613837596626454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.6f74432f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-suCDg7A4cRy9Pg6eCPCpct8fYujz4CQP7IjVH1YzFNs9utm0/szOx+XQgKuS0BmqPKzGREgnCesnV4JPDH4e0Q==","shasum":"6aa56bebe0e903691e81a9d0940ab4f1bd4608b3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kCwCRA9TVsSAnZWagAA3/cQAJuN9yir2edUSFaJYw+q\n3wkscqz/E2PdpJA2OX3BNNRwiHFnBUwzNoADms3baWNhEQ0HiZpbF1yQ/Y1X\nd71gAUm+aWlAdv6lUnkR/FI+gdd116KOlrLT9LX7ut0ySrKIlS/n2gU1VqAT\neIFPnMzExd+5FdUImA0L3o5xLqlBDCQ4Fev5oEX0POspGZq1iGi/AhwExXvZ\nj91z7hgemZ5ikCuCnw3ZNoIiiTzWZSWQEoEtA3POy4+3GqY39xERDM/YvJ+z\n7ofd/nSsPhZJcKon5uUKmFS+HVfo0WYHNgfy0s9/fPLWPCJB+MVF4mgWojjs\n2jEt121s2JV86UD1vECuQPHw0p0yAMFsbPXS5sCsfZgxivFecGBAZKrAsEE2\nMGYY32NL2IYTA+MPj6GoPJCClg0o/tW9vGV70aYI7IKxghIv6uF/3Yu7YUV9\nzNSIuh1ZTOffvFWWQqBMAeC3Hoh7gsybyVPfmL5x9ovgTebVbRIuKFANyU19\nPSfGJ0z0MXH+zoWttBR+hqfipveAN1YDLC8d33FotX6H8annqHC1oFInstsx\nBr2WWgHx4mzVVR48SSGbO5tdJSMtvKPmi/ICKhYbtmuOX+tLTZSyAgjddpJW\n5tMBEdBhr9ArX6vKThrUbNzxO1k9YeEniWSWvOY4LihiPBp62p8BJg6nuSY/\nCvoM\r\n=E/e5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJxxCpUVDKNb0S6fEN4HI7KcaO/IFXd3z+8peVJKRaUAiEAqQfe8dRGb30SX+qUbSI2cp8zllah9dPMlYmnQCelceM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.6f74432f.0_1624654000185_0.6567776188114931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.b62f901d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lMrvZ/dck/+76vhMnPDCxv0QKUJyHlW51ENZuavdP8ePnWW8z3EbaCioD/0X4bqCsV1m/mYLGSeEn4cx/nzLfw==","shasum":"aad424ccb3ec45a1e8c595514058913c71a2d342","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXYCRA9TVsSAnZWagAAsroP/2ALc28AwivD+qLFSmg+\ndApQucTolgLRO9qeWfhZSbVNad+qIIaq9QO/QLMpzn6eJOpUXRPmpB/tOtcM\nkhYauqWvmw5XmEv/mtdcHswSgrrSJFthUCifxyQW8b5LPMUI7hyYnf96EMhF\nk2SVCW0fHjefHnJU4igtAK66AyvJJf8Vye3r5HgfgGA0cPGP+uVPuON7rF41\nki6tGMj+eV2slL6ReHvRCYcBuGpxY/HNBGj2CzZEyGzUgaZNw6wZvtZtlnsX\nm1FW4COHT5ZEEv9B5U20uXyeacLPksKV1qvsDdjwg/gyqRfkoalc/imycf/i\nnm8oiEjN/fT3XyqphMYEv+OYAd5aIptYOItYYMK3XCwElvpz3R6ajoRaxaRJ\nJeLpMQhlvc77VdfOo6R31GeRjBwcT8bJuQ07MO+ZfKg+cWzVH3tTRMjBNkrn\n47HhI/zXuqRpe3e9DRsa65StS3xe2e9Xr2kgC1lg6ZkkaDhbignobyq5L8J9\nIAau9dJHJFk3TQ3dOCc9FvozLXnkIBrmO/rkM5Kh68p/FVbsQVLUdSuvufYA\nsv3VDcGf1wgQYoXUjqXnily7XUjOo7i4gEHuGax19SqsoIKBDyDmKWEokl3G\nvO4/Ns8U1576EZdGij/9Zc1gAQP+6D9BG9DWZoIGsbaN9ypIWUHYFkCG4VqA\nfPYe\r\n=74fr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAttLn40gHXO1SxPt/UnHTAeLptmAnFPra0cRIUdGo2GAiAxJC0GqKqA2k1CMc7tir3UWevdXOrsd/Q1kH0Zj+Aptw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.b62f901d.0_1624659416411_0.7402068658821315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.73122cba.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GsYVCL2Rz3MaiEWHM4+29jIh7UMRWK23XiGSgJR/CVncmYV2y1IxuOolOHF88BeiV39YFwTR53Fz8+ibF5PkKQ==","shasum":"63ef39102e1664d960a6020d084aa30bce8bfd42","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Me0CRA9TVsSAnZWagAArMYQAILbaeN0mNg2ZN+NfwaT\n2c9vvfJn9KmEWBlTjT8KJUn/54WzjCu1NjxsFKj5hKaP42p5CzrhUJDPLZdw\nKf6LEPvUrelpxflIwyg+vUb65tC8jDxk0nUgAjL7RtDvHEREUyrFZipL6SXB\numpLaKIuagXAvu+goa7JacD3wfERZ4g38S5SJmeUuQEfIJPFpoCDGVyzMx3J\neFtRzs8rHNmKfcN0MW06mdyJAoqkQDnyv6EvTAMLzpzShgA6C403flmeS4JA\nn9M7mdMAMuGED272TAddLBoso2f7CX+qp0Tl8DLwa3Z13ddPRwSsKaRbDUJO\nh4By5/jIxm+DtjobxHVEBtig0SdemuKIED25BCmkO3yb7lwQoqGYv9YxHY0/\nPIpkRqOf0jKQRHxYdHmOq2uIesYVBt9lMndYI2dG8pRCwLPLpHY5tpD6S+PZ\ny8/vcDNhUnbiFTO650AwtiEahURfpPLt0xh/YtSkBAHKpwOOIsRyYedRY0la\nHM8vikjEjtCqqMaE+UYg12+kbTO8yTKIgZT5L7IAIsoir9JR8OoNT2IUjMvm\ntllNY7c3BQMT5fOJtqIN00Q7N5/Qv7MnQVYeMNBDWIGKSq3szCTT/G9BM/CG\nkc2tz7PvRwLiAwoI36wUoDOyUuJSAeGK4hZ0ed72KrmMDE7JW1wUsQfFu7yY\nRHNO\r\n=LLFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6K7er4krgqLyHppL5bS8EY9knedjetExfdsTqOkXfEAiAlMd7EoV/HmyaiLdXhgZA3cfeTFELeQqgzGvbAG0qBMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.73122cba.0_1625081779982_0.4554623027035032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.a6912af5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a6p6swARf/+marJo394Grr5ewTHv60LU54QAzOIfxgKEMxi9gRJRxCLNPxJOodti0KPetQe0lqLQoe9vTEK+Fw==","shasum":"324db9769d06e2397df202afee0e09926fe346d9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jS3CRA9TVsSAnZWagAAEVkP/jj2Z8fQ4dN75Oy+jh9H\nJk+rcqoqTrCPFGGOx21v7WZZZDsaItr8ajMV9BSCO6m55OYWXCBaKWFicg95\nsHR+ozWKhZWUCTlynWJ8Fss7Kj4sm8C9gYSDKEtXjpG99+WhxyOenGZy69US\nj93Add2eVE0LJ/fK/Vz5D9yHAmC7wLecoIOR5jlrOKt1PtCGg2BoRdGgC7pO\nE0ULr62wc7acEPYWwXy0KwPj8b8Sbuk15gR+byGZqMzXz9OJubdhP/V20ifW\nBWICsopBdlkgJlwX7dlrDZClsh6oOvEqcCfmSTDaWvhjZSS8CahqcsMP3eG7\nCH+8SrBBN40wswsc1bSMEJlTV0X2HfOcGOpQ6nWl6GBX3cMQn3yfgO8ujpR1\nAKFS6KR05auRN+PjkWZyfNI28nxMeHjaIAfW8PLeUMcAuckBbR6apCuq7qaR\nNVKvgU5HV20YmTVM7IpnxsZP2pH9b0+PS1xZHVUEUalckBArsbd6/4ESG1vT\nNcxD8QSERRmGYEXOzGSASLlNyogtBlb4AaSL+Xt78/ZACHI+2LbdT+0H+as9\nPnFXjUZr6c1OiuEjeVLIPhVeyWvPQWvCo8OUe6KLTOjctyqfQHcjOYIfKGRZ\nRfyM1TOnQeyEV9lO8kHIBNI4x+ofbasHwQJwsJMAkpHeML3MUsib4euBURP+\nMNvN\r\n=imCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8NoiDEuvoGO9j6RIDCaEajkkoJVt+8VCtzcaNrGmXoQIhAJFSLNJSEqw4jbChfFvSTMieVpRoeX3H0PrRLT+CuesT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.a6912af5.0_1625175222888_0.6333126566039817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.134f24bf.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uz8eGeLK1SmBnrwcYfzeAGsQmaKkdp53y+dWbjoNLFWCNCK3v+AFAbCkpC0AZhgoFLY2XuCJMFco+buLsjg5yg==","shasum":"81071574ec03dbf17b7183019dd52ae6cde09076","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJlCRA9TVsSAnZWagAAB1gQAJHzW/YjTdoU7GhbE5Tb\n2tNX+OJPqM3YGX/Hpx5OC2eEciV7Rvl/bFnqeXY2METBOnMrkN1WDOJHDIf+\n9ibCyqD2PProJrzom2G/7Fwy/1m0CExucoRWRmRQzYru7p7KNQvRKd1nBLhr\n7lMAybrlOOTmra15TTc+C+D7nxZ4pa9oIn1kb3m1LdH67zj6EJT4bnWH4fw1\nX6ot+9BJqGjPcRU3c+OCFjb/hgyPyHqAv8+HEfbdzFgMs2id5wttCTLNCHXq\nLNzGitL4+4nAgxS4CtIq0wPfgyd92OH7ItrgWM3MTL6jiEZhNDj2r0PGj3w2\nOz7w09qcdA7nLAphXdpIzIkfz/3/NH+aqCgPJERBotSsEXPt4U5slHh1BKhG\nOdh9alJLiwxxeS7PkZDobjUxbkb+/kx4vEzoqWsp/rkbmXMVHcvpvBBAnWKJ\n/BxxFqQ6BA8n8vP5fXZougZul9Ci6PvpliDm4P0qH1CU+Ddaypqf3Fxm63iL\n3hN/n+dWGsONCglbwLzPmBCuAIv+ofTQvnaU8sJXxfjbm8/kaBuElQlsyJ1L\nhoLTbXOWcsXdRSVYjCLcomTIK9pBWfesm1zWQ0qhPuN8+XcPCQHylBk0XYQx\np/EejtbMmzhxbyb73gorWntHK39mPnDdUztZ0lLCZKMebOqtX17F9jySOLR3\nVIUR\r\n=LuwZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBX22N+CrzGeKEfykV2OJ9GF5q78Dh6k/JBZBa/ygJq8AiAz2Sf1ExcXZzH2aYjVyDAx38/7pp+OEXISr806RFqvQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.134f24bf.0_1625178724832_0.7699684464325136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.1debb78f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xQnJ6AKfDCDOQNJKzATsAZGzAur3qjWm4SbRBjnTQkFGqN+DGh7846DyT7nZ7te5CbcTte4p81fDCeYsE62I/Q==","shasum":"50ee3e1af66ce45696167861c2e8347b40ab1ee2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlECRA9TVsSAnZWagAAGb4QAJf70BRgcsoOh4noe1n/\nPpr/U+W+CrSvVGABm6bJ7u6kRsvMStWwfNO/pPIBl2X8ENOEBnNXLqQTvS3k\nbhV+MMjCZMDS1vkiY9D07HsqdXWyJ0JnTpCi3RbmyU28NYV2RtzJIM/c9UBm\nhBPGeUirvCddrZlR1EkY6i5hZR7F9AQTU2Wr3i1bDt1MnUF8SDck6cEV1bd8\nMsbjxs+ibMz6XxWOxH7GiM2R5iVc2llyXWNP93G7T22QWsEtgIINxqiKWH0F\nljF1g7kU3ZpASX1G+MyJ28RZlk2YJl45zSTB/m2qCgJfufyzrovFgJgHdyXl\nildSJ3rywO+67wAdw9YwP72rg0MB5dnDqamhckvsOT1y7bzk0Cod0GoRXxBt\nBPJ+zY7wHTrS1ZfHxBrjOqeoNa9Umtbe7hwVakcrvbLYnNZu9Nw6GVZeBTS/\n1fOs+kzeYxE5usdwXj44QF6J008tPtDju7szFIv2280huJnbOoq2EO4lJxZs\nHKsPH4Q9N/uARYM6iE7ZAbFFc6wxmQ0TZ063N8Pet18Aw72+GEjQgsLnsGNH\nJcuamkDS8FCP9wx3kRMGM9lN6kMpYDSdTMyJGKxOkw+SYopmkj/7eJJWl9CE\nunkgaoluhrmPjSFiMqZJ9dxgv7d0YN9HD+xznzH4TLZy8CfailJipUMnJhKU\nL/2Z\r\n=n2vf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoOIRA7js0e/uIX+IMt9ZtzA8DRZT/qGBp6Dvkbj74MAiBY/8TdGKTnAj0tEc9yXpQ2EyjmPnECpbcoHNLDpcZZWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.1debb78f.0_1625618756104_0.6850261727151823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.d53edeb6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m0MMeN4TwyskuL7BmQwQNPL6+xv53wac3xDkrgXJi2hu9gn/FDwheAmPuf8+h6m8AiVgLOdH/KuEfH2GOZbHig==","shasum":"5bf942ba609c53c1eab64282cb588aa96dbd30cd","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2ICRA9TVsSAnZWagAAVI0P/ApQyRFGs5nzsMpb5M4m\nH+edAzZRv/hjmnUgprZUdF8953C4UtTYL3AM42R88HFzk/1U3jPb0M//Q8O+\nEOw7g1dGgBWxW1ROjm4tHdxKC+TbrxpaOIhz2S0dir2CbxD8TKGfZ/G2DZqP\nC75B6jr1+o9LYqnv0C5eOIICQzlzohd1ve+1n+pXIqVKDpop9j0gnSNTX+Fp\nRF63T5q8DktTKTEIZhom+Jp52OLXGCESzLOsHIEyza5+qxlhdoWD2a4mXA/B\nUloAhzvUC8785g/uOmyc/SpEKnxJb1+3hwyr0zLzEqiYuzacCe+2jzhEwcm5\n3VmN9dzhpRwHEK0LewuXiYnDnw62dl6bm5PTuUcZFJttIBKpp7hz5+/VznME\ncgsyvjX5WkvLclvtSSFu0JJuYFg5xGEf0dNLiOet7ppAq6g9sX854sCtGQA1\n7JRUJd6aDdqgXNEzaBY2GLCkbX5kcaDnMo8GuBdVLBqXZY1dE6iTcPWShALH\n5Y7NDMPfY8JhTYMNWiyG/LkMQWBdf72XXf9yAz8EGahUS++Pmeegg+kGvwp2\nFdrgDtKtycxEymrqCeVPe+wGn2ekXyIXg8bL+5Fbt09/LEtr8Hg0pUObxkmH\nTaLuI21mxUeLKF01ZR5NNqWit8sigNOL8pHLBe9R0a3y57r0+C1dkjNMKM9j\nigus\r\n=aep3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgphhDEwSJxprdL2AUnjbGYGzCMWgcvrUXi2ah4BPuNAiEA/EZmdjEtK4AjjbRSoeykyRzUJtkR3IkPPECp0Q4j0tY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.d53edeb6.0_1625677192519_0.772470538955756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.2226489a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jvgMSaUbDUWPhLTfH2dKexEhNpAKKx9YJnnvPcjPXkiGBkmTMFHYNvpJh6jbbzqVPvGVFjU9IqWMnVbmGSeDJA==","shasum":"8da38391e5035fbfd20ecfe61204db6c004a3318","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1nCRA9TVsSAnZWagAA1CwP/18g8my7w1A8Lpk9gTpY\nzHtFbPMygoNYkVzuXT7GeBteS3rJApccxotExn4u64572dNo025LCdK6RLhz\nDzDNmuCBGzPt53fl26SuuDT+a0cLhPlTdh1RzTIomtjCEw6xctDg783KUUR9\n65qlSCnnvTSRS6/uwfjrWUgscC2PEm28Kv9KB/RiN3lMBfHEcJ/DgMjrebOo\nhKqxlzd+p6poZ2wHZnfayozffaec4WhsIhrz/OPhGriDzX/w0/ar4q9F3T++\nWhra31S60b6jyvUOZmMVS/zb+GVG0sFpLKymaLX5I8dz2iDzoYuc6KCPEJID\nYTDBDa8hhgWSBiQbsiZiKtTj0tNQRqB1liQE0/z/8DP/BllBhwbCkw7Dyzvu\nIReXTEwX+tL2iDrVmle+iqEP73Wj6ey6xlHrDTnwz6dOi7M+lEyjrM2AVeJG\nEyXlwfJKuvs6bUpOOsq3uBEBxjYk8KiCXjogwIyW9OYBxdImnTTGtQ2Ffqzl\nGIVyzxqds/KGih7cN35JCTJ0Yzju51UHhEM1V5bObPsOQtxFh0bjJoXxy+R2\n8Mx3dei6sjTgmbdaIcG/dw2NlmqbNxX3ib3OvQjV+Rf5QmhcJ/XMsrlkjGBa\ng5+gTRqSv26ZmC+X+LIR9xIe1g0P0DoczGsE5EKNe2WSxvOhWKSgh8lt3gm3\n/8y7\r\n=x0bU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvzmtVRM67fmfltTtJhqFPe0KZzDO6DMir6l14SfZr2gIhAPD0k67TvzaQVwtoWLRSp35k05DW0KnbA1Pq1RuljW4/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.2226489a.0_1625767271380_0.607267776449959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.d4801c11.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-adc67C7VdXzO24tH2xUYBbjlnm9neH3rXOEfFtPVq92e6DkCV3uTvxD1NKttEnV1veTD9nZUMwrFMqjLh1/XMw==","shasum":"2d80a68f370285ca6674db179df75e3ad62de96a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nSCRA9TVsSAnZWagAAtn4QAIFmvMon23XIryBAaeMo\n+Kisr2VV9ZMRD/TicgDDz2ceIzUdDYaKCuFu/C+y8dalUnV90lRJ/sStm3oL\nSUdnXHuUnUcOkKMXlcwLhKL83RgQfXlRNpX05tyNp+1G8h4qAdstGbiHZM2B\nI9sfHa6+7gtCug0Hl/VxpWxO/SL0/ItDJkLEfNuVZIff+m9MC0sHJ16GnGmI\n7NqbC+fXO5mNJtjKQdLIijRXvxugtrYr0TUGNIetKJS+n/tzpooSBuT1F2ED\nqtVGhc8/3ea4iuy9YmEPK+iS1bIFKGJxi2jrL/KsH0OgvBwhE+QavcwrqKu3\nXkij+SH8pG8l+75TriRYamCtsvykHOn6+OaCW/KqtF92u7SXXA3oYQwB7VCC\nqkM1QqfVkJ4m3UXgQl8v2UatJ0e0KVX2+r+D0g2HhRYskkYqH8/jHZkN8k6G\nsT8ybBzg6Afolz1n2gtL/qIhZytPFC6NGjWjmltHeuXWsuuVWkBJ8p/86UJH\nojGD+uTDF3IvaJMkqDeP5pcadFQt4+sOr8/pHd0Bv0+gMRn9Iu43zLSu1RbI\n+VLTMbhNCpH4mz9a1DxtzANxBPNvmuJ/a3sYzxdgLoj18ZFGMQUSs8Vhpqcz\nC6TIfViTRSYC5lQdu3bKBkvWm8NZ0v+UPxfAkduASo8ZHBjOum84s/NlDgXM\nMECr\r\n=YS80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCw1yCFCYYpvNwDZfAg4Z8hF0mz9xRlNatH6YXCeQzNgIhAPMlW4oeT7u4p1IXNls/McWGarAaUWOI30tG56IdxI62"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.d4801c11.0_1625774545698_0.5161609752683105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vDTbL69ux7Hc3H0BXUqqE2xNeIMhcelJsE6umMlPdCE5vqsLfsRZPhiVxzZNiv7BHK6AojkQ4IcXjOx+Tx7JJw==","shasum":"71f78368bbeef7461d80047141f2b73ceb1fc738","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjrCRA9TVsSAnZWagAA1g8P/iTkIZJMpgIGfBXlqqb9\nEldmrKqaNL6490tTbqj06ajIh+ZzZCCZzPMngUQfg1KB2yUjCoRLkwRc+Uch\nDd6smlTu3vUTBIOIYmKulQhjL9CCWqSle4FumqoFqvj5JGlASCMuiDg1kDnx\nboMi8e9UVvwif1tqC9q5nszD4H5QB3iD+Gl9q4vzKQkPgmuTh564R0v2HneV\nMKW+8boThrVoPQhaDlWK2HALCsx9CRekVE+UIBuML+oKQ0UJZqpSnwuRNH+X\nXWWRWYJwztcvBGbx5hDLXQIxpkOXgu7mxBgZ2oTl0VuloI5z/JcZPcvhmJKD\na49n/Lkjj/w305HMVqcn9QcssdTFAyqCVF5Pc5s48uF4SDw76RIr1REZVIVf\nMuqMDtdYLg8vRzMronK4w3f0Dc9NTzeEYip7lM0oNaCFBFrZS9D5b6bpjmJ9\nMAU/u6BR/WdMaS8xuFtr89YoMvZq1DmyXfcjGYohGTe5wagx/vBft+XFotBJ\nHITFlJAifJT50RyTQEu/yo8fIjE05URsiszyI1UpAYRdUTLKdoThaGRPjZWK\n0F6CuMDX7NDoY9oEVn76FZNix1OweeTtGF+WPB3yzemSBQdFNX+7YLd8TG7A\niYrrvHotYH6JM9tb0ppvfmc6kIBnZdV18BdkvLnVDRKU0RLPHVcVER3jyS43\nblLq\r\n=3d6n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyO0hs5ujx0oSLQ4yiQ5bVs0Dvc9yMJ8fpFASrAgae5AiBL6sumAl5JmkQnSsfxoGguGsupae2MGCfqWTv8cm91dw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.7ec5f2d6.0_1626110186927_0.3085639077838551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WIF/djWEPR1iWc4KCouaciesOGTbRWAYGsgzH6y4aqIljCgWmnukXGGSZcT+sXYqcpolcvtPHsTCl5yQfda80g==","shasum":"e72fb3a90d83e2e923ab8176ebee2487036abc4f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9JCRA9TVsSAnZWagAAhi8P/i/5vcfXe2pu9UB2OZeX\nGbI/DQDJ7X0SrVEJh+05+p70BIhDLHlEIPFx3/q7ZzIdIDUyQUq+1vGdN0Nq\naY5nIkJKrNaNKZl5vEPXjn/KS6rFlPtbsQOOp31VHX+DNHNj45PCNcp5CnNw\nqnSIwPLLJ+VYyDGtLR+CelDSxVCeERWJGlB529qk6eNGIoNoh6TqDgPJ9DFi\ndvDt5ow7vtXWbMhUgMKFqfdnWpjcLl5Ijf30MObOn32PwDYOdDeoddhEsK0E\nWaOXd6EOcAGjZcCheLRo6SdZ4XYxefUJ+w3NVqPCWKo6wC1DX2Dl+09oigQ0\njm/kf1JR4KXdTVTLAQ4IgZwIaoeS3wPawh9j0FhaFtUvz/5Vculn3nizZqPj\n5My5nCiQSA1Cl5IVYQP4xY1cHEy4j2VIysZx3CFHGSgPXFgu4C0IJoNy0TDL\nldL6DqNazBhUHjYRXMHLvXQCVDyzfFDkLwVvVTFKKurpGBCKZHAyqOVYxaZW\nzGGBU0u2yHo8cNzYcuBXQ5hh/WEIVix+iTWU/l97KH9p9g60GyLBLn+IVXHx\nkLl/Num6pXAiY0NOQgFVx3jULsEa5c8Il5DPFj/2RGF1KVsWP7BHHQrnOmrQ\nJp4nHoof/eOvqh5xW5MBYwxDok2P7SWDMqqR7i0UwCdnMB5k+hzZE5hHemJl\n5RmD\r\n=BX6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcnquEKhYWltYtg45Y6acV5spbePtgRI2nImM/u6VZCgIhALRmJS6y3cOmaNYrhVZsl8MVR9V5PBFHDgjVTUxcFubn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.86cb4ca7.0_1626197833048_0.28157790357889034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.cb42f5bd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.cb42f5bd.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QEeo4dCVPwgJrhHOl3PbFO+Ub0l29VfYKjhCj7Ap15EjCiKUdscbIQfRZTYauyKqpHYXs/mX6LigU8f2DjjCJw==","shasum":"8a3ad6627842de9ab64f8f0110c3c51fdfceb9b3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.cb42f5bd.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dk2CRA9TVsSAnZWagAAbCQP/j5RqHONOqpLgkuBpQhD\nXrQfgyXtkJCRIXUS4GB8QbZJ60a0irb1YCG0LJOTF+afk0hlv6glaBpNYJdX\nSbXRzE/MlK7EOPnvyyYc+JpKNvfI3YLMmbLtQvaEJAFWdlj3y4kn7SMPV57b\ncGTR3QSfv9e2kmzVTin28V/haHKQbng/cdk0Ig6HGvzxKMSlxuHAqRXIUZqS\nCBCOQJSW12aSXgKHQsfbtpW0yr5iN7SAGbtbFlkap5FpG0pbOL5enDdIBSkb\nD5T6cEcdGiIRCgeRTJvoCva2+Ou3iso8gZ3t39Y0Gl0zMgMHbpqP4EXMNT1Y\njWfWl7pl+ZQFEcPkrXMnga6oQM5sto9K+ffZqUYfQMlGWYiD2HHU7DrF01uT\nudpOxyIWPpoGdET516p+ok5yBu+5zAB6DjPxizNQabC2oM9ZETYqjQdCRsSU\nmWvUXBTAtecddmr1KARTySR+uBKwsNA0/Oa5t6mRmIuNOQihs0LgnL3YdsDZ\nOd+gNqavCtF4Azeobd8KG8752WvFuzSzUjmx/rPQ0LAMYo3EjnHzx1l3RRr7\nJEoVvr+xrVGa2ooFvXzpurSKH+GHgXeo0xM/XYTvDwmXv7XsXtVlr5/Kypz/\ncMhz9TzyidVTiCjuDP5xT+xcrtyF2azxrZlPMsFBWFPAWOPR1iRHDtpL5Xc3\nCtri\r\n=NRKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQmxxS//82eBlBkYWG2t4VLV9WMdbthQlEqqQozq9rVAiBrwsJDhYViZ16Wwjt6tfCebdfiysv/m4cd7M0kzs0oZQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.cb42f5bd.0_1626200374047_0.7816481207091719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.bc9a724e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bK72VrWn70ozPM8kWkR6VuwCkvSsq5O0PBuXTkNV2cQO2w7Wf0LiIy3m6ZuNGlz/wb0S3fCLCbbK8BCcu+9WrQ==","shasum":"fbe13c8d013cd54908abfb3ba754ca62cf718d5b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5qCRA9TVsSAnZWagAAfNAP/2nCYGlTaZenKz4oe1ir\n5m8rtrRYhK0WSim3KTmuP7A/D7Ibls7sGpgYCDtHEPnZcxY+U7UzniomnGAi\nQ8wzf1YHlSzkTTe5OpWchmgN0yGw9tUNSm3b3uAct1gewO0mKG43Mq2Gf1hl\nErA9LSXFuXM3B9nIx+8gNayJwB3PpnC+G5kQ6CDCTtN3hzCMphrptXjthEly\nDToy9bT7aFm1n7uQu0rt2l+UI/C0gqVRzJ6a76hhy6Vkb8BSOP0Uy6Zcz1nn\nyH1/DEcYetKrW+8NtEmW5B6Kth1U+P+dEVGtW6FNEoLbEmBkANIt5vpv0L5z\nllJKMaYPU8V1WaoivML0dLTqJkmbvlAdMjPNj1TvjXu+tFTxm2vMWskKPB4j\nx4IyWhfHhwYACodQ10aco6EIRxFVX74oLYVyHjKEMC2isy8VvrLdIVP3GTE/\nWy0ht+io1RuygFaoruigvs37F4ryXcV6kTF6k4fA7vmVyAN9S/1DPdQV3sxe\nP5R8rfvIOvvu7wknjV9NetMA4y+ydoUTHDKnFoVztuC6d9TSh/OJuMMyphiX\ntb+c9DglppkfCg4qU/CL4qQSa4JwL4mCxOu6QdzRBFfE/RSkGU54FvA7s0Mh\nXx7tSig/dq5sne2I2+rigb/EX9Iqe1mO73i+EaqOLlS4kGeGkfM6odpvuO22\nhrlA\r\n=sL/1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdqavC21EKiDR2569sjF3EQuSRabrZ1OdJyjyoHvKrPQIgIH74BRAsL79RJDjf/q0z8BeJ5kfmOshRwfMroNnoNv0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.bc9a724e.0_1626201705760_0.14830841407823758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.7847b83a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gbjb72KvNHbRlx5MBgUzOtqb/civ0Al3k1dkYtOtkZBfYX2VfQ+b/2EnYkvGvTHJw4sod12vvKmSll5sYc20Jg==","shasum":"9bcdf7ec51f8af0ce4ca58097ca55cc9911fbb0a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxbCRA9TVsSAnZWagAAgycP/RkOAT0rgOUKsOP8RPay\nIUyWYFrNdGuvm2OuxzCK48JZP0QGx430KniRgORmHPt5p2mWv/O2PZBgnP+w\ns6VILNb8hI9VnWBV9rO/Nvg6r5KrY7heiBrQlWhKRmznho7hqB3hq2cp7VEu\nskg5TCh98DGzpb0Lh8qnGiPKiWwfvQmsVXVov/TSVlw7yELRyDjM1l+pG19U\nnNIm/bIWXuB08J9d7XyUVFeOg0b8BxsN7Nr/eMNfLuUvpA+JnWrXk9h3yBfe\n9DwWTOyqgeFApfEMtRJ3GFo7361gB9LmxNIWqEWoGWPH8khuWIuyP4k9LiqP\n+IUey2h7H0FHEbKQdmIJF7QMt1/DRMX/tPTGhxOuGVXfWda+CCp9dySA+lo6\n6bY9Q69BbO0V7mrcynJwxarni3JD+23azCVegzFWRhLlsesWzV6vy9FE6i9C\nQ1GduPSlXUxQbMhqVm1Uxw2nvnH3Se8MkucncF7hWtchchHCLwQIZ0OK5Bx8\nbfHlZNJW6XfmcJCnfrW/jUbbh5MpByLaU/dwa8GQesMg9PjtRwtWDHSy6hgn\npQ/B/55e8nVNReOw4jbCYZjZ3a3rwLXr5Uh/m55r+LPkz6zhjA2SI6ch82mN\n3YkhI10/iFkOZ3tkoz3sMcGXRRtIOSqD5fkcuT+0E4ys6lax7TNEW6Umjimw\n36Hv\r\n=jins\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBbHGXz3sS9lCMke7+YurYy7UyNa2XD7+eUECDfIQp0wIgcej1lTLmvV6e+HYd8yy2B9SnLMADx4Wld7I4JczvgvQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.7847b83a.0_1626283099297_0.26529575781641834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-slider","version":"0.22.0-canary.8cba18fa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-czNG2M4RZM6ExKwDSgEZdn/y7VoQCCAv/p32vYqoMs235cidZXVhNjJtban3F7tfbuwDnP1ltK5K9XxT08nTog==","shasum":"df208cf90eab0f6fea9b83122228c2be8ea9dde9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hpCRA9TVsSAnZWagAAzlQQAIm4zgS3MVQzdnU+db6v\naABaSJTtu6p/FlaB7bCRnCjVlEZMoioyFwrfKlm4ejImLs5GXDi/DPELEyTD\nVyyXMWo9GkO4KM/1O8pcbgctAsspZNu+VSAqXzbo3BItQXLEC3mP5pzZhQmt\nhcwDMInrMDbg2AWk6wC/NK4Ak+HYU2q4nFiJkqvKAq5V4yilagkVZV7qu/Fh\nS8unWtXXdMNYF86zJ/ZF/fSck4vj6WnY7DKVxeAKqRjr4BgKn5by5ORc7A/x\n2NgOt8zqz5gxoR7BmRVjFHeDjRDwoM1dTRDdFCUjOABsJRva5SENRaJEpuZJ\ndGGPH7boyyxE4rVaf6DYc5Wd0MB+5rVgsB1Wv32jqi+pGH216S5TmL72Lc7X\nDvg7hBYhxMpmceeX/roe43aqFMOG4JirTiGH3Qo3QCdlmKY+rQ5UFIeSTJb6\nEwl/ta6Co86uwh5xfMzT5aQjrI5qGNUNbQ9dBlhGqRCsSE3hzMCt4f3YTuDl\nIe3+pwhH8vn+1S0ZQqEF6kNGhJdeYoeXxdY785URVAn//OiEgcUrhRzNEwyn\n8ZigI6x4gTp3i/237ldf7x4tlTdt8jIoEAqxU6rlRItSGTMCM9t1dXBSdpmf\nG3UYbY38oU2+UU1eSG8sTORmhWFz6i5UTiHh9ObdPUYs2/0xmDBqE+iSMJhI\nC3iE\r\n=iXmP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAf8bPwlOvQ8k9gopoKz2t9ozTmTRye18ZBrZ9iYQV42AiAO9L+W9iph8UCIhXHpIUH2zXhrFu8FQDP21f2kDBG3/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0-canary.8cba18fa.0_1626294377352_0.34249541194558164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-slider","version":"0.22.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-3b9YD9RxH08dYUhuGJBAou/T2D3cbAhSxwUieOkh7cQsvUTJTs/K8OErAnfG1r2SnAE+i1hroiM3FgA+I3wl9w==","shasum":"823a436d2d4126cd550d7da5dbd815084997376f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.0.tgz","fileCount":13,"unpackedSize":64189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72XaCRA9TVsSAnZWagAAQLgQAJMgu7iS9oKS8YaA3c2i\nyZb0dK3D2hxG5JL46vteyl3WesPbTahnWM2UaZ8NiS8P6IuELrVpF7EOvuyT\nP0ffwQGlI/QeXILk7jFVcUIkZQkdJb4L05BsAVAisGkyZkLTiYrPAeJfsob0\ntNZVBPEhKUBv2x/mcYN4N5q5wdhirEEMxMgMtAbtXzg4G7scD/U3BqzsG1PV\ntGuywOTV0Vuqlvp1bjPMppprNO6jV8sOm9I8dp5Wx6KuB3EA8W8P6zzEIHxg\nKDb/pvytgyZOxZxhWWDwZsn7Fgs5VupGJ6TNYV318hfHBYuJ3WSbfmL+83on\n8BLnREwBhKI2gFGqIsKbSl/9LkZtSe18QXZR1o1C3iUk9ie0vt9I1FB9DObw\nayPfP/yD3Hrsx+DaCoF+PLzcP1JedvQgsYP8pdn2GZm8St4FI3HPTZiCxgBE\nWpxtVUKNdoSDgJBDjHUv5DHjHA0xrw/tB8iTNjppYGRinaajeCowpTs53Z9o\nJSsJbC6Rr8+aQjNkN3u5PA/4K0gwIZpiF/fGGLSXCtMqhr/JvSXSDrkmsFsl\nSCNWYcI7b6E4Efh+O0bnoFTGxhyM48LoKw6MGFlvT1e454UcOpTxW90zkXAm\n383bwtgTD5+mtF0u7ViifqlrCOj5HpYtRs2LVEux1YVguHWHTQxfggoQ+oHe\nTOxu\r\n=h7Vz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUkyjmYBCmiUOShJ5UTiP+acALQ1FdAbrDQfcIcVI6DAiEAz3Gn0RRdJ768TLc6oO4G9pKegSjVM+nvXKaEFLeRmWc="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.0_1626301913851_0.171498847951991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-slider","version":"0.22.1","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-fmGnIy942nGfFZTq1kXBrtCJhx0AN6b3OizER3aPuPrvg8pHlV+5vWalK2aA9qJAXtJKmry/uN8ZW+g+WbXgDw==","shasum":"865bad07bc31d75b1abcecd3d66010d401cb6dea","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.22.1.tgz","fileCount":13,"unpackedSize":64189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q9CRA9TVsSAnZWagAAS1QP+QCMWrlbbQR1auVJYrZo\n51QdszeP6s2wLN9PQ8ERxKtABTcSr7R62yRHntZtFMnPrmmrrFgtN32jVRre\nK7BbbyDffR6xAO/phVt9SrEnIdUbK3VZJoa+jYjnFnrqi7LPs/9bBe8TE6rO\nMOx929p4dx+CnfkvkqihYmSqMUGMjU0vtpWMX7d+wsPtDalop4ef/zaIHgWQ\nY7F19tUe6UJ1WEclvgzvNH5ZY2iYCJqEwhgEhpAw1wN8ktkr701hDbNGCz4w\nGzLC4XP/ZpDB037wO3HzP2OHQgCS/7T90UVab3zvAfdldVJq2oJpZPDKcCHI\nXZabh3h6oGuOcybK+NXRZm/ASCLp2sNNW6krPKd9z4j7PQ3M0nnJ96nnzvgG\nxDh86qVcbtGa2U2+htl28ol4TSeWqW1aUCZS1AmuQFQL4ImZc1kyrQEUiCWU\nuySd4urMxWtoB8skZZNvsHJ886iRWYQjFaaemVrXunnRxdNO0WfZorTPgxTk\nyNs1pMS9g7spujrKqZaWJU1s0z93j8OJhvDUYQXv0Wn6qemRohP6H+pgBTPd\n/MqOknzznXkV0/HwLAgpEXFMrSfhPv31wjCJRMI0iM0t1KjFCxeS5RSGCrhU\nSsRmPtvdYfw9qpjsMz8iXkQ1Lx7Wh+7Vh62ohAgGkLWjr62joJvPrfq/atNg\nXP/d\r\n=TODz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG65Ai/la6s2GwWUvO51mvcWlrELTaeKvI7ZCXZLO3wFAiEAkzoq+7PRsThaNLbPnpYWHnuuqr+UOqrTs4bwtazSOPM="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.22.1_1626303165034_0.9758906239916598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZaH7Gjg3baP5u7BHvK2G9EYGcd2aZcWr1TK2mwHZtG6K39oHjtRVVyBnWlR+Hpt2tmTYCiD7FdlF6uVgg2uuwQ==","shasum":"0e29099a4797bf3601b4c564423d60b6d3297427","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72r4CRA9TVsSAnZWagAAs9MP/2TW9N788bVDlrrgs/gd\nQTAdwg7oz+916Zcc2TmrZ7yDNaItF7u83mPuoobgn79F2krjpk9lLxPArDQH\noOMXUF6nZWYcO/IKiiD1CS7quQdNBemm6uHRAUecHToyioqlDkYRGQskdyEQ\nC5acnwGalJIleFqTA020xcNJHIZwmDsRAMT7h3f4tgHOpHYwXGXY1WmCXV80\nJMSx1xwVdEt+T1zWUMGjQfDFkWDbiIuut61qvOvBQYw7fptw3muulFFBfWKH\n4PuOFz6LNmEVt6YLRmHM/wfBRwxle7LWB6pDDlbcAwptsT8/aiueC82URMXm\n86WTV7UunzLyicbkAib2WZ4kYS/9e2XF0wZOlElCiJpF5NTeaCFW9yAGRHr3\nyR1q+49CeYAkljXLrGsEl6aQRLIeKTl6J/PfK3VdNEyclxJVXR049o+cGrbc\nLyESFLv0N06GGQuI7ZYzr8tMt33lCBJAnxBtYDzfDNtWRUJ1zuubNvJ5eia8\n5l+gNx4MkxOQr98OZ1p0sNBI9sap7O6F5B7VGhc7QxjdBu/P9cble7J/TTqG\n+CBne/pUwAwGFDps9+XG6QY4qnnxyp2DVUrwLObmdJgZdoj1rKvo8Xq7C5n/\n+uUbgl3KkBnQTzO4YL7Ry0vSO3JOL1U8xbtpRWsS62qh7OEm96Ro/DtKFqld\nPV9b\r\n=bwHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmedr8rtjR8zWPjFGB+0cxKhULP83o7juI0nmU4UcpaAiAbObHAhUtua0a4QIZ8MQMKXNLIWljytNPkTrxVI2W0tg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.fbc09b4e.0_1626303223551_0.5337512268850428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.73e9f83c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p81qAJGCb1kaipv1GTgc6iw0J2TK78kWJ+nZ/e4aSRTFAK4Lg+ujnIjX257tILjxZ9xTDImJhGWb16Wn9yuaUA==","shasum":"b3674b0d6145abc31fcfa5a3c74414632600a911","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Jz0CRA9TVsSAnZWagAApW8P+gLbsj8OL4aoRM9P1s5P\nI/ZzTS+18nmPanTqsCzNmTthk5Xd/3v09VtKtqasuUN/5ym+CHaDZhQIti3J\nETiDJNo4nEpVfayDwPo1sfIPNUcCelPcQzP/+fLm6eVXVjWvzGHViG9pmz1K\nV8KQUUOyH6ITlZ3kcOblZbaHaSqtt0f3d+8kKRwkXug2OUVvmJE8sMI+5kcP\nTCAgAmFdFPjs+gtr33mjiwAOdrzL/D9qnsNPQOROENBnWR3F/aJoES/7ygcR\nvY5WzV0XZMZxu6m/1qb7pLgkSNFDxobp2i61BCN5e6to1c+LXxJxj+os1Jpb\nBjYwl8BMmyl93A6OvdHMr7ToBWV0j4sDBwkyyIm/HwfUKDQMrPOWoGzRxg5A\nfgZDSWmVH61PQXGySfxTAH9yrKjDGKaB/y8UmX2Rf4XYdCXsFfU7hFDjK8rx\nH5HljHQ5k+qvOxtYs/dDF07n/tPcSCaQrB8yQdmY3k3pVY/hBeZrhqALqjU3\nAwHpRcqRyI79S3G+RIz08f1s1Dpa3q4cG9LtQyQjesmtULXb0Fo8s6Oh8yPQ\nXHa5SvjdzUhaIr+3jvk5p96igY8tOmxhrd5ZtvzP9wF6kNuAtTaH8PMpAPXr\nf/DexqVck1pR5Ie0PRNAtLLNxYs7OTM69GK9SGNY9tGItAsmqOrWbOsyO8Ap\nWCJL\r\n=8L3y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX1RpV4r+GpqdNtlxA2qN5tJ9fkiSXvaEkpp/r1HghwgIgfthVirZby3IcUO3sy/hdQIErdMtKfMXxt1l6TEGX2DY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.73e9f83c.0_1626381556250_0.90634367978221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n/XsRHl7DlpE584fpinZy1JVt/HFkCi/jYWC5eFd6dEgCh9Eil4Ss1v8bdrYPEdvWYr8pNMr9cdb7eW3uuG4GA==","shasum":"c54da72c51dff0b68f43d462be813d13e6aa3373","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKaCRA9TVsSAnZWagAAdhsP/276tKb4e4We+loI6hQf\niSE3jejcg7KSSbQ6AfRtBXlnh+Tbs5nyFOvKxXoUp3kHax0UjzRf44y2pMUM\n+fw8eJUPRkuX8GymxJtJVoJRLTMX8SArm0MUDZJFeg2gFAeXj8Xa4kbUHLZ4\nO0JVqetN+Pwo/oEq7J1kpcs73k4w7WAyiji88FdPW6uVS1JQa8KLAb/ac4ho\nqEDoZHA2tLlIK+7UmgzAq8PHwEDZqyhAngKbAeDJ/3zSrigZIYzHuL08P7no\nIfMf3HD2oQBclR39nLfUYwnfjZNCk3hIrpU44u+cB7eYvxDBoENdy8Ogm0TU\nZmo34AjDVn0H1tcNIsCQE9hrhTk24a8x90eU+vVmegeFReK6iFJzmssQ4IT8\nuNagQhD4V0uGEeNM14ObHtYR4S1HoLAyjrMbGB+Q19nYw8RvsjxXwr3MPDYR\nxmek9x1ZidOPFmPg8X0TnhqVojY6+yemHGTSu+kGeLbQVGDlX0n3whwuMNkd\n0hYSTMg87dkUVErve4pLfXH8NLwgxwigabFraO2/xlONftCAFY4VZMLDX+/U\nHEHebYlCKHG/Xsg/tnFBSoEk671s6+OfKo/j1ENwSga9rap//Pr8SVUe9jRh\nyG5feNHp7aGCAkIdw8mv6QhFXGDot1RzcDukCm4pD6JGBvNhQ9UMVu0vx9S3\nww8h\r\n=dzg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUMKDPXwVZPXgaIDmzIH1puIjF95zAMhCYTuJT/aKW7AIgWD+yf1pGKmwgo67ZQ6u2z1l0hSfRkgh7GgjrJ+k/Px0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.cc0aa7a9.0_1626383002294_0.8131536391558221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.a8fcac45.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ry2O3a9CuuJZf8QVQs6nfjvdhHqsYwlzvZwB2Sf0Yrjydy2s5Fr0ATnWTTyeZLE7g2NfhgoPI3hfvsALTfZUng==","shasum":"8c3bc407c01fe6309d30b7b4f5391ee1b6ec00ac","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.a8fcac45.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcMCRA9TVsSAnZWagAAaWAP/RR29QR9PqjBrpCVd/CL\nYdAWak0Tbw1t8M4ZPr23rlNsUqX624fUiLE3XRPbwhXKNzcfD44/Ee1VuISd\npMlbCBlODF4BiowFuuvcKj+u5SDycgzaqWvPDqBTvQ6w4ozdvPbjV/q9Syw3\n94UGRvHCAPUoh5qSUKkBiS12WJHgPQMlMtB6LkWe+v73cGEFzODPDkN8hJ4+\n1/gItvcPXrqiZ/gj4jFq3OfkH+5hz/BT7CyxCvyRVo5Z+cdg1UB+wig8OpvP\nxbjpDmnoArpuEHvpajXqRUl8JORjlH5stzD3eEMEuDJgs3GFSK/JpEG2YL3+\nBE6ZK9fp2ff9GTU2bZRYxGApUlxX7xOos+Gk4UxaNcYjErY02mzjQ60gAWxj\nc0///teMe8AlJUpGpQGyJOkoXlckPYW2RqwQMm7MCyvhD+IiRuehwknmVX8Z\nUV0IosXYUBPxn5HX4OVpi/wdW2nYZPvGsAw5u4B1z/QS/2bb6Z++c/4Z3zy/\nG6fmUt+9X3JDjuxQGaQWAHRvl9yyy01/tZRKYufcEPMYkYjgVQGZWgK1dFBG\nVJECeYmIMAkaxp/ZWnLeAn7ym8F9NoMo73XRzaDSJ5hWYGPDPWl/Q3E0CG8w\ncbDd4UG6I5tVB8/fbNUCj66v3NEYmXGsCpey1Evc1rRWR7MQufjhs+4jLWhP\nnzh+\r\n=4lJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSfQPrTn8xfMNtpTnUZRrsvuUbEY3XnU1G5X7uwoNliwIgV47b6VxnxZ5OLHZbzGlrpvzrlYFz5Iph/saJLOvGVLg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.a8fcac45.0_1626384139846_0.3567433267021376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.3ca580d1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xSWno+tWuh5v1pG+AEf16Vhw5dHJmFOO346NlEIfkWi4daD4E5EgKcqJDHDzrFHvwz0ia1voejp9URVlUxIshg==","shasum":"ecdfda6e1b49152b58705b2637a95392dc04d42d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.3ca580d1.0.tgz","fileCount":13,"unpackedSize":64224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LC/CRA9TVsSAnZWagAAWfgP/3S6gZ6WBLkAm7v1/5no\nfwF9ec0JJHGv7seAtnVjpH5X6Vcq7e2Nj5pEpJh53AEDMr0O1ZO1ol5idkj8\nnUo6A51tg7pGL6GVKn5GAHnAVGorBlv7jJvSDGmlDIGcD8xlC2vi/j+JNKa9\n0lH1c8ya943EoOSEtWAx1ZpLEXsWz2kyiXdi4nkAdR2KaS1ZvjNivZFL/3Fq\n3e69x4Vkzo71L6G06tAXH2+8aOGBDdhxk1wOdHXdf+KZOa9ZgYwUh8l1xl7w\navp8bPPRuMPCic+npp08CMlXK+tpqINfvs9txxhUenSBy0qDZxhtTKpPqFSq\nOsD6/gzr9jqoDDn7eKC3XnKVdvJOk9HvWgdtbG1oztNfiM/xnNfqmXJM/qhc\n6CK3c7/3XsK8rhhDElE9OLLGF6CwjXayftIiwYtr3VQVWPz9KU2j4EetN2JB\n3ytYC6vbkK130u02PPE/Ow+mSaXOvCt7eo5F1tk/R1migUHkQR/JqeL+k7kr\njdd4ZXkRkca6cHsyIJculVdMxQ1vP+9gRu9B3jw7L3MzVnt/k96nxRW1EneX\namPA9u3TtOIiYLitVTR2N9xryVGMHVHgahXonvu4NEii4d2Ls+u6NnvMgYke\naW1N6S47YW2wmKEBoeQsLYNVAJ2a6XfM49DVk9YU5sUPXgbn/CG7o5YXgRYF\n3lCn\r\n=cWbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrGqe4iyG5Ii6X4ManJTWgWLbb66uKBuo8j6LdB14A7gIhAKIP85O3rEYXkgE91IHJ8osHmKVZB/R7FC7OZDxx682A"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.3ca580d1.0_1626386623677_0.8781317517115963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L1lgseHOk+SJkrpRpHRH+UwJh7b6kRllf2kYlQP35BaBIsERzbQ8wMqDUyquTaGoFJK0zD2tIRo9KqLLfYu4Nw==","shasum":"9f0219baa3a81ad14f07b082ad8839b6f839d69d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.9e41cb2e.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/tCRA9TVsSAnZWagAATYMP/ienxxdKaC6OHsSLUOJ/\nQkSflfwRQZIas6I9G0ZuxW+Z7rtP/+bP0a8g61NtIXTrH4KGpqT0Ro9sgQUr\npxFNBRQJlfwSnrSw+d5KdmcbucXoNuln5oddRtWNefwNBPQjV8IIDWCYS0Dq\nHPu6YSflKcWBACH3SY8UKcn+NwZxHf3BVu+E/6sJLqfIFvczniDTkEIxay8e\nKGXgrKVBKlr/5AHzE7Ub+WE7mISt0z3BzqdjnEWhKNWtGMxq8bMfutcpPJPj\nXq0aETfz1a8kZn79lxySznGeOjIcBddcX5EJr1vPH0/9LCWvVb5IzcDITjWO\n6p2ongLwfEWmHEHSD5FmlcZdVAEKrs7Eu1uTzcBoS59TJuUkdDWZKlPqyR7l\nxamWjYHq5w3gPGV/Irx21xn/er0lwEsCBYHklPUwyBt8tow5jeaOeuaGftxN\nf63g60upBZVYr5qhe/8U3aAv8NmHSETbSVuV/phgih7mC0BmovPHFqDPTiT+\n+MyaEqYfqRnqDWLbSkhojCfj1fWnbk0yyQFhlmeh72h1IAXv+2inwOW95RpS\nnblGL86UJ9ReTFvttXQMgZ68pXOqXgykLBHKDkkaXDxwFzaqOm6knnTI0OmU\nTf5LsKxQ0WHp1fxjoXehskt33oqsaglgs7tD8EqEjRnzozrvsfJnEJ1Hiui/\nEgAP\r\n=ewxj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN2CHzRzG75vtmK84SeouOR8gMbHZuY1V0ln3GMh635AIgFTU4k532bJx38EIaeCt6NzHTnaYwyqjKjEP9mOzkwsM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.9e41cb2e.0_1626390509461_0.3091729753800154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.c180db74.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4uk9sWCf1yWkpsJdZnw4IZdu0WBNuLhqNqlyVmv4KG9wvrWVpjxRhmJ/cstQZ0BsWj8bMOqo70CKJJMIR5oDYA==","shasum":"8f5973e29bf07e116ed6abc553fc147f1875928a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.c180db74.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDaCRA9TVsSAnZWagAASiQP/2a3CObPAx+baAyjyWUJ\n08sdH2zJe5oM1HrA3djW4Qd3K32qOZe8v/2iHhH0zmho+0v4c6AaT+V1a/1L\nE9P6c/BmXUGWvINpLIhV7hNb2t1vVOBcmqdagvd438Jitrk/PDBEnoAQQ5hl\n5vawlz45tKjVqMjpM+2XcvwBHQpxZqSlxOZUv4w28ISjjPMyauuh8PsANa9M\n7oySOMBp0H4LLOtpZXgb5H6Dqj6g3gXX5J1dVBjttXBfN1I38/UXHwj5JiCx\naGCRT/d6ysgEOeLdHmbizSfDc/jn64Wa1zpRfdijMrixT/0GLt+/+voowG5Q\n5cv+SCqcFWMiTqX0TYVzMIfOX7Nhr+IXj/ZlLPZ5IOgr4fQJIqtztaDuJPoX\nDbtyTmLeLX9abUXS8Ma2qrivNvn6deOgmI4LySXzuSBrd51ENSSd5whOdDJv\nOH4g0b4Q7dz2INPoW5ttAs0MXdzGnHD0NaEzQWofdchAQlDYtwLGs2AJYgIY\nSRZJAyNO6xwSIacWO10yPa2IfFZRZ9cD8wjySd7eTgwkbQDD095R3u4hKKMe\naJ8tRpaVc71LFXqBzwCttSSpzn6SlYEo92BnU2U6/QzDtZ5cn/7A2XxaBpHX\nnWXKQOqjUobesuMEE27r3cuJ70C4Ym3DvgfSPaEq+/P1NKaoWKWLZx5uIt07\nqvUV\r\n=foEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6u5rpFy23E8fDb+HFkC70oyVR3mQvVzk1uy2LWlYDDAiEAkGZIfRncLP2KogOLQCZ8pV2tJc+Vp2mekrZDPoBGuFo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.c180db74.0_1626456282635_0.649341395735112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.0d0a9267.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bThrPfI8fkZzzmNq4gfByByqcrlR3qtW35qbslR5yP9Tz23keHPpCTHQo1yIEuaHn04puiYm++gFFoKPgXSlvw==","shasum":"3a3f10dae7c730352b853a6c9f222f41ef224fee","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.0d0a9267.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8choCRA9TVsSAnZWagAAHdUP/27/9bHpSSmge5CZR8Gi\nPyZbn+HjRgfi3Loicv5eRSKNTsOuruD9Ye+diZdlxBCoxiFnc1rtbkDglzaj\ntutxxiqwJsNHIuY65iEhHz3OLuVOEcZE+IF3XRfYx6SlNMNLZBJIZc5T+GeF\nZpJ+HrsZu4M7JL0/iLN93ZE2rzAH7yRvEd6/UxXyivtXdETCd2iGMOiTF5Yc\no9YsqHjNl1Ijyo0Gy/6DLIS8FPsPakIYftD6iQqGgat0hp2YK6g6sFWTbhhP\n9l946T229lxGD2kSmqerziNnkoiRDAbWjbECahv22y29HxG3KzBO/W6hQk0L\nHVz1KlPSdm6/GJj1mOIPgoEzMFy/BUAf6As/XNfjuYbPWR2/wXHa2VpWlDlP\naqhAegg/KJRxB8l3EqVVd52kAgvwoiXr7oFxL3sYw9qSbd/STTF5/YXbUR0V\n4uOScrMZVmf6MYSO4+GU7TEHwFD0HBR8zh53UQmPlmSvq/KzIH/oUgpaRhu4\nycx7nUC5Dhpg5YkTTJiOj5A4/JtOvhMqK/VshSlNnb8JGFDwcHHQzwYmEGjf\niYzYoZoICxTSxqXdF6ycC+A9+MwlLxvbDeb3JxskGpv5+BreezNsOW4QVQiL\nndMqR4Bx9UXxX92dWfCXFjZDQMYceTPM/3PfNjJU9b08kOcBNQwKqyMej9T7\nOoei\r\n=aY9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOun98xKwveRRLDLMSn2DQ6ayGGG4FjWnotiJlrW3KUAiBg6dGSzekgbwl7ekRprVbTnjYL6mL1OJEtIcixEyZ8GQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.0d0a9267.0_1626458216499_0.07528530209025863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.d234ec3f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+59U3w9kZ3LxheeaxicwCRSY/AuiFCFe5Nvsf91U1sOLpIw+La0Npsl5va1bPEnJWwHai7Ywgj9HFYTgCazbbg==","shasum":"910c6440575a87daf199919600942b5ab14cf98b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.d234ec3f.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8criCRA9TVsSAnZWagAA8ecP/jVNI+qHR6Ucr08nxuuT\nIVMUGjWZKpQOegtPIkxCr7RX4drKerPVwegWu478IZvCq604ZloifboJNe6n\n5tGg5aK8qTglPeLwC7QqBsNI+Z3wzno6kFJzogNeSWjumIKAslwifY9vOQdz\nX3+X7ZVIl0HoRmqizaG/hieaDVrLnnRP8e/EuBYhhOIfKA5fxL57Al5nGEBp\nPGiAEisvZpeCLgGflogAhqK5KskFHlHHoXbmG4sFwflwK27o54788WRNus9E\nQ3AF28uzuiXO5kh7HU1GUSV3c8w70dLcZex98MZE/egsrU6bteF1XLwWetrb\n2sKESXHkdDpAyJl6SxQsdiPrXbSfjp5pXGEaG48MlC0TCxVpM3cdTs+dq0Yj\n+BLQXw+844v3vbbTVlxLSZfrF8UE6kcYhN9V5yvKHJzDC2eyZa2YzKoU3Aep\n7CxHmkPGMtWTye8dI2Fn4+ykLMOiiR8tsg9tT3qxQJk+EH87qRRsUf1BIXSf\nNDjF/c1nFd6aNduA2uz5YPky2hx1DkbUjqZAcI12OEZe137sslVPuhPfR1NT\naildXB4pBY8xcvGOw5k4ka3QzcIGR38AXLEwwXpZgkuBjtGOjQIU69L47NN+\nDl7koQDYLd8y5pxbKYQwu6FS7Y9pGkD9EuzZTJhUgVXMe+9H08z+YfY5YYDj\ns86H\r\n=+GtN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsId4k9/p3FTgTc+GO7YIfkqPP7GIxgarSZriXt3JBgQIhANZDF0fjYQ+ese5paPDDJ0mhgxdIeF1mFPA8+4HFl0Z2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.d234ec3f.0_1626458850747_0.4714652138624871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q7gH5JS8tbFg6WVy6XBD0M4VykjzIOgLQy4uCKpmgWzp6YcNSWGzGuYaYORE9Ixo778Q7l3jezTf0SXoMLk6MQ==","shasum":"9541501f1d4c7311f8599c13ea649fba8520f588","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYVCRA9TVsSAnZWagAAxj0P/0sNOkI83e8xAzzw/cds\nWm7xVgKR5u7ziFwePSXTnXC62sKA92BKCDf9pcQMsEaq+1EgC3G4r58Jbi51\n/69+jYED59fpRavJ0hbCzG5ePNkYR9xSepTDZGzFi3Z4rbiwF+qQ/SFfB0tL\nkQu0i5A12iMJnCbkDTPyRv3pTVSWWm3zEwLDhfr8JMgu0CLvN53Q3V3HfTjA\nuWV8+nxfKPsHIs1hz0TAla8BMvs/H3lJRcRCs4zGod76sWYDC5QImhaMzAG9\nnXm0eXSldsxWYhiL1jGoVKpwpXp99X2AXxXNZ/0wPsM+mUQaCWYBdAMwA+ST\nfIQzuzvK5OEiXZqnDx4TazGMCxKLBoQMPXAH+F5qTehylIg7VY//nRipvpR5\nH9Wk6tpPJ5v9vCkbq8BvSJBrkd1IP/xgAdw+xTMl1rdnKjtgnK6fP3aLB40K\nTrs3qiQFmgSwuBeU2Valz4lIhE3gHUwupEfTeAdPOVCURU8nycnR5vAUdcjk\np72WJGLJTlxw3DsIvXSVgkz9Oe1T24X+QtFPXz5jV7u96v3pxJu+9sDXkC5s\neYCBhtH+ik23b8Bf10XbbxEQYaYx9K3ZFNE8Ihx08iTVDaI7I6jBDE3I8Xjg\nRLmgs4J518w8AtSdNQal4zwpgaNgn8lw5mxcQEtRWItpPz35k+vPOU6Hon01\nfWHE\r\n=QzW6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6SsCjuJN3VawWBfKOj+sMjzr48xhNDw9xm+rIQWO10AiAjhoGQ7YbDDwzzErSx+sV1XVqeX7DoxmbXV6D3qgeMBw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.5cd4bcdb.0_1626469908945_0.7790500472082398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.2b133cb2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bB6vbuOS+cletInXOYM1npz/vUBPEzVYnUPZy/tpz0TfXO+67CJRO2gltQD50KjUFcMeaKNkJ1pAIewr4D1eMw==","shasum":"1e21806deae626e9f5d17d7597c964be1523c31b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.2b133cb2.0.tgz","fileCount":13,"unpackedSize":64852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLZCRA9TVsSAnZWagAAuT0P/ijQyLfa3n7QanBUF63N\nap0dtISr9w1+ExtD7SLWtHOokz+qljbYzgxH0DC6N3yfVMXQMaXnz78rZPj/\njXHqZJOrhqw2qEAKW0Ym2+myB1fsHkan0ZgxMvUhfuR/IkopX7EpYeJHK69b\nQ3ObYNIWt5LoLGDyVahOQQjGoPmhLixnt8QCcKMg12S8jVzBnLNh79s9AGth\n9cIOmW0Bv4aycNQNQo+Q8lC4w+6g6xdtDh9ebn7pGGGZrEJ9v6TIzDf31isq\n4ftq44rL0vOfdHohUglSWJkJaLwTc8qXPxLGJfhv+rJ/rMzBmxDQo9vZxefo\nHP4lU7u+YKqzS+GlaCzy9JhiZzfji8Kd2Yo7h2/tNudenwTTY1ANsP/oS7A5\nJt5ROXb+Rgh6Kz7aOfF/intcxcEd8U/flq6z/talRkp7/M4E05WMUwck1AJ6\ndQEHLFuFatihTyi5M9eJ0U5LsnF6amQZGSzV8uUXSrTauj3E3VD87RQL6nJ7\nA62Tz/m8UMQdj5lkzQEyU+ZrIV04JjaQV2VVBfRsVvXk9NHR32E+tTtFw635\nlCG/l/YXcxQ7j7QP3nVNBd/7SPuypil5RyjJZcd6iOQHEktGBouXlJwrRjw+\n6axOcmRKum58BqXW2JSgqHLBFuGqaOagVeW0EJjPxu/P8HeAQ3Ub1bvte9mU\ndBk8\r\n=kevB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDNyoXrAn7Gwp7k3pJOiatgk8tW9fi7U6nnuv55P2cxwIgJFy4tB3k08dVCjswNQeFywwZ6PPCzp4+FQkjNJqKnyU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.2b133cb2.0_1626473177434_0.016979818480466813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.ae4f422b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fwBCx+vDsanDokNGH5DDhg9nkKRBk5ojwsX7JWFgSvYMb7Ifhx7AWJ0jiBVEg82utL/ID1zYRcYGNdyTTPBbqA==","shasum":"4f077dd1746187f02606d0a5a3ce7b02d771cb1f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.ae4f422b.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwKCRA9TVsSAnZWagAAWd8QAJTE1qetMhdUfpovsm1a\nNSdE+gDUoFEeotFmPJz0ygx/jhBa6EUVaVbsDcEF0uaXu8QQ8GiPdmDpdNrD\nFtziU/klbV8saobgL5NJpShSdBNO9VyE/Pbo4R10jzGUjbmnu0tVrs3e1kS9\nCeCXp4UgLxkgSMG85u2buHUHHUCtOvPIrs7rv4bd8uLEtI/d3yzIfoi/951Z\nZei8WeX4Ja5+zXGRLc4epRpRhzSrpA9YRvFnyeqJ1RboC7Vdl2q0g6Vk+3Je\nf9tKqLrhwMpKlqVL1ctKQdHAbSbqnoNnGdyTvgBWk45NkWsWbavZ9p3tldC1\nQzOuTn0XbjrOsA5HtRzmPTVLHOjOeRiz7hC2UsJvWzu/Y55EH680IlC6fusi\nrbGlZ9HTrfm+gqTLociaR+lEmDOkv8V4xfNffDsY4ncjfggsmu4PrHOVjGGo\nd7YMZ+469bcoDbeJ9+5OLSNUzX6xjaQPlRHYDzWJFeuKSqW8NtskdLpB47W6\ntOZp5QloBLqt3x48LgYRcBbqAAWfiPNXhfj6lHpiR9tJ3+KiufYnqxGeFMVI\n5dMXfDWG3n9nHV0FUdyQbq0cAkcXpKdTq9cVFN314tRShM9QAPo0HXumMYzk\n3tGo+nIbKsERFiD7DwjfpitZEqEc0fbiUUMmMc7JFdj8oL1nvARVyFCUo5ka\nRrsw\r\n=z7MB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsxUZYL47+cVLk6+sPDane/55mQP4fapvj299VSYgVnAiAv3Br8rbxmCfCYwPhwZ10i4afz2tcRJopI31TdZHMYsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.ae4f422b.0_1626479626602_0.17861187842575754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.90ff8057.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5IIhNvNAue7+JYSiwzAh6+fcX/Dg52VS+JcuDjskBmd94sQRIQ9JFcep/RJcZYFXyLbXgaBCwTQSoE2bwahwOw==","shasum":"481135fb0d0e637fded303ee8b54a9c315a8d3f2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.90ff8057.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcUCRA9TVsSAnZWagAACVEP/RXo4Ti83I6RNRae7qm7\naNJB7CpVS/0E7WLOzhKwG+Fe6e40XrQ/1LIfZB/KF8HEAkqB9Nrf0D3d1WRK\nBZmvzUDCeKhtdXSr80FQtj8Jvjt+mb+vR/JMCcFhaicEyc1mQFACElkoHwh7\nt51fkTo1aY1bH4EZ3YBXUvk7xg3lI1g9fonUUC9roEQWrZioFHN8zIXqgxvM\n/23lp9npgaveZ/mMqMFj6IDdDyzMYocZ0+LA1KH8j//WiK/R4KJSw+/4QtZJ\n54LtT33iF5meMiYKUZTVsu379Gn5K1W3MX7Lw0Nr1+9MylvSxkwgHG9XDZ4t\n5c/P/6xtiUHJ6zreRX4NkEwuj/njoKTrG77TmmUUX9ngyTSoj22jUtmiOt7c\niRF1JiENMP4ZNV7Zwd69JZWg99PY6Kes4vkqGcDHyKTIKCZjzgjFiuIoQxTk\nVHI9tAdaeggWAquAGEQw4+BQwutaruaE1U2VIw3C7ppPOUhOishTcQWBbizj\nJbMJs6Broh22WLFJw0afNCenKq2dMK7pVOhrWR7WZ4VilNFaQ5xycCHVs9vP\nXWOGeP2PFmhpt33smC2WXLKsrSSufc/XNJwh3v2GYN9yPkdgxroAU/4TlOUk\n5Kxb958Mt4qdFesKa0jnZUiLaE2xswsWuF8Kh9c9fQ9+0GnP6rvDPQXd6n/+\n7E08\r\n=30XX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKk9jDcJEYr1LLyzcGNJq+qvhxqncXnWl7NFgUO65dJAIgQI7CM/gBsVwlpcFElqU6HGcRU1Wnj4U+zlpJGP/N08I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.90ff8057.0_1626703636069_0.6463791867024846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wSe9kdGrhvkY27prOVCHkyPIY6yzmSBA1Ojylo+mTuZIeE79p0g51uo/dSC1cjn4rFjXz6s1KRxzDIJrZnTsjw==","shasum":"cee0a1461a1b4efaa6537f861130d5d845287264","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.dd7b75d1.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btbCRA9TVsSAnZWagAAgnsP+gNqAWDahlcxLSSbHnli\nxxxFoE7i85ZJWDhLNjsSKEejEHIooY7qHazQDL8t/MUzm50bd3bGhZuOa/6H\n9l3k/kAAEGoCADpyF0arGIlaKkmMRYNa5dDOG3FSHLSey0ulmPK/fzYHLBO6\nwJznqCQrF1u5d7pI7hyo3pJ0mROPXhMnDdg5/TdK41WZxnt1l7ilXD11zJum\n+7aY8XyVn7PnQIsggtN+2vMelv7nn4LYCDqOG+yBkdmwodMZFJnJ8v0SLrkn\nXqgdmRjJLiBWaCORUqPb3YvBnMPUaDCdScTVFT8b8hgueFGV7EfwivYA63u0\njgwnCt4EChgIqWlKHdJ4eSiGU1O0s6cf7iGpn245bBjOCdppXzKJyuPIRq1a\niQHMJSJWWZdu+Pkqecu0oQJ8HugCo3dqwjzAFgYHp72NsoI1PU0PFaKIw9RS\nZII69o5V0UmokYS42MY95x8WOfnnWTG7He3ji4hrqt1AU01xwLBllOcxNWH3\ngy7OzQ73oFbtHnGii3j6EmPhQ0A5P1TvrQZJD+BxCiipcOTPi4zCK1Xp/0lf\nU9QE+yl8XymD0sMpK3hrQeUlQFrJ4ob1sr4GUyLAhtU1JeLJIduQZbxyjBew\nqv9/fxz4dhtHne11Ju7r7DPUpHUNgAIei7bH21CfmqPhJqGxeok6o5GrU1I8\nGsGC\r\n=8C9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/os7gBx3BjvVIcMpaI7nKFZFseZ77qlFxN94BXAk5wAiEA710j1v5mRmSV5RFXDGvhegfnt8wb7Ra+LXuHU0yPofs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.dd7b75d1.0_1626717019391_0.11505705073296113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.104debd5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iyqsUXjpR1gkQj7UVFj8M5h3BRch0Hu6wAIFf6k+jjBPNfUgp4PqzvytS34syHAKd+guOU1FDpFtOBnD0KphDA==","shasum":"0dee1fba226d7208af9d5c0843238a6bdd50c956","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.104debd5.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJdCRA9TVsSAnZWagAAjBYQAIu/RavTShbJnglGPyBb\ntO7JHl8c3FV2n3YMaiwougv54iTUZB06aJ+BvZjc8YbmXbJ6UMh0QViI7GOn\n0IskMRd9AeQ3iLIz9rL6CBAkGZ0hGuAwotSRSaCMOGbwt/FQqlOIadAT7Gb8\nV7Rg7GjXK9EToHVFjTwaEFOB7uYqSZfvpjw4CC00Ur8SB0/orrfYoLOp5tEk\ndMpVrO848ffKuNbSTLvYWpE5ypo0kaIR3YTHdOX+yfJ9SaYra4fLvTrMc6lY\nGqX+CJT1LzZccPDAsnZ9irNnc8zg4HveJW5c2WSio77jeTouX3NQ7zBx75yi\nHK2RTyFqMM5BdqqQyVB4qZ9IGq1R58S8yz+REOMzyZIqREKRBxaGS+vLGm04\nK5IxHriC+kjfA2ywhBBMqc0G0W6mz/V1CE16xz/MGqqeMM6ABO2lFKeuC7Dq\nCS9rSdPQ/RlRnqfsZDxZ7/cU/0Jtd4zPExgqNEA1KdEjMhvvPdRfzfUiTI7k\niaH/m4jevyQ5PK6xBWY4GOt6UPOC62aK07kQrXxGlPtVPJfiCTyKRIhQj4T9\nIHCj6dM9P+0z++jS5uSgRVTjOgP3JMzQmz++h+cYl0gWNnm8MKF7yTnvyp0U\nkzP2kTMTXfWUaGBv1XKQemVhpNqq9rBHS0+Qw8gNXA4VQ6AFarnJ84XJENqq\nkDiK\r\n=ZdiT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2FrwfpCOW9f2z47TI/Tkhd0f0EKksfG1FvcUV5qoSwAIgHDom1R0UKlFwRyZGy0XgpZ1RcZYHY+vHSmjy/eRAqSI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.104debd5.0_1626735196980_0.29290064032227536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.4612705d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FSKlSzrpm14sEV7nWfn2HXl8Whs5pUf4GpZDPwlbQrEvc3Ti2Pgxolu8vcgXhs4DLT8GoRdwFbmWzYKj76C04A==","shasum":"9876bc471650d21f2cab834d1d3508f5b599498a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.4612705d.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQFCRA9TVsSAnZWagAASU8P/jyq8Up1BHKhM9Mcud7h\nuhjpxZRAs5Y2/A025FqW/KURWP+do7ME/sBHEcQfrLY4axzfX+hxFowqjwM6\n4xXtqlGVIe0qjSqghUgoRbeIj04W07YYBOxZadCV/zHxOzBnB0UQobF3TFay\nICy8Sha6vfB95GoPhwe56PYZrSoM8nJMW7nCFabLAzal/yXrSyZ4cLLRXWRl\nQAOR+HI+3P55AZWAzJ0sFQMykrJA1OpG5mcuNPlcsyz2XkdxfzRidOyiALBz\nUGaCDruFTyPiov2+1ZxkhKQYkN2ChCvSTZXJy/TkilyLH1ReYzSsatpgdcAB\nCi47YTe28Ij74w1+IF1mhjuoph7eJnInIADNvplUb1fT28VIEsJafdKGn8rI\nhS6fE/ax1ESqJFcUTH7Jl0ClW7BvAY9KTm643nnI64T7hMWhHaZq9OyqOGnU\nEORebQZhDoH6ZFays46QV24ny3d444qb2dAvZCw1k449hs45pO72FeSPEsSN\nJ4Q/8DX57NL/bT9JZ0ALFtpaj/ssqM/CLRNZN2hk8qm+WvaaNOrOt1i/N+U/\nIoNkVTNZ9M6wd+bkswtCDz5AcSRmK054GLur2aL3dLR356yYPJszccOL4ctq\n5pnmUXZUVkDv78zsvMwx2OX2vqf+JAnbxfCIaYH9uqL/s7nY13oXxT3tSQi+\nJzxG\r\n=WQUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICax+cE97+qza8kfk4EEquO1d3XUHRZR8aJsXmGCZ+jHAiEArBrBX5xyTAk4bf1zin9cilmwHwW7VRtOv+VL2YqqDW8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.4612705d.0_1626797061797_0.6300609458023494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.b36502a2.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q89zNUKh+TFkub1w9EgSTIPhQ2nRMVcgb9NwU9ftBEJprFUZz/USvrP637wq3qidsCu3UTIWEEyFXO5R840JgQ==","shasum":"8e6b899ead0963df7a304087d3c743a35efa5cb7","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.b36502a2.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDqCRA9TVsSAnZWagAA6psP/RPSzC+4q1MQazQRTWge\nlvTv0UBWCm4ng3J2ltWDHpTb8wJxTTYKgayG8X26d0phFVlLLS+TxoNDUp4a\n5EazmPxUkKzbavN6Qu3LYZhAeUMsiqEHcxaDT6eLjOlWoBvgwdJBl17Ddg3u\nuURkBJtZjWjbTWkaS7W/RLs9aweowPNXQQb2DUdyl0UaQMTFaPnyHAfZBd4K\n80NegwMo4stlLzdeAVzp3evTupWO7M/ygGHS1H9n/moY6HYtyxfMdMYYrK/M\n+CqCkzp0+BCSj2S3mln2QNvmcMqZi6AE13yxFTCZZqeBH26Uausiq6bWP4zd\nYaWW8+qUQZAFsGanZZaSSPhZiU09TCkDrw2Yor8Tw1FnLIFn/8iCPo2FncZt\nqUnVJi4jcjV1X6dNQoA4JCNS+y0ayX0UrF3zDdKf1+/PZ08J0FrQRHpTjL7/\nmhnlBPC1b3Swe31u1ootb2uUfx93NhJQDOzaUywbw8kPDxVtwe4700mVfFVC\npgFA82RI3ymEwerOPY6x/c8JRsGVSKJWN/zBqiLNBg0qhcL+vU9w1PgHjhc7\nUMgLx4xw1N/8BtQyeysw+VUrzbvoXz/1dZFU4swEP4RSsC2gpEN0tl/U3fay\nWZoGK/Mboj/kwEYX2E9G2QxZLd8f8ivbdKYjAlIfvaApc/7bR0O08roX5BlM\nNKLQ\r\n=oVWp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAQzlM4v1ZscLIIKedrN3R4bAnGiVTkzazQuIwmbYi/AiEA1KWO01qXmlKt5PscAJq60L0/g5PuYMstBBslot9YrBc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.b36502a2.0_1626906858202_0.4702706616310208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.2c392ab3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KQHpbh4Xi1SnWzvilc3T21D/lOD/eYNdpydLpdlGOzxrtPNYAKlEF4xXGhiZsZ4fbQqtRWeZKsvGK24fZOmbzg==","shasum":"f80a9a04913d08eb60bbae440b246a108c228562","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.2c392ab3.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YY1CRA9TVsSAnZWagAA1LAP/3GzeoQTdRpdR4o8yC0t\n4yuZZENTj3x91Hv80br1oQQ7eIt6nD/r4z+dSz8Sy/1II0H7bFsrJzlSUe1k\nbGc8h3s+a+l1IoVaoq50SiMYegK4B5hdAVjHh9BtDS2uUL3mLf/PHtHUxfBS\nhdqB6L/FIPCRzrbSSQZ0DSTewh4UZn5eGtQXDvcYC86nerxjFMU2dZQ3kDz+\nhZfPz1PBo6885E7n7HKZVwgTYYkOHNkUNtoty5yL7mzzn4MO1Q+lrHp6mghf\nbOo4TeVF+Ic1birYZ56CPMcAq/3xRleEXoRHweeCpuirJHlXKfT5pZ3qHd52\nulJkwFNxj4n6ij3dQcUthrZB8Fo3nIPiqoe9djszrBnP3qv5ehUWDIloP7zU\nnHHFmAFXUKsqmGs7nxp1cxD4pLSu9qNknFvcSqJx1mYKGlUH0D/E6TIkDhyD\nSqr4I4yf79F48QuaEToW70dXOOmtLzCqh3JdhFGr76c3ZXLTOPN+58BhocQC\nZ+e2p0Loy7Xw3GVnQWQ9T4nZbhk3fCY9+0hIIRk7DGWMbIoA25gTKgsoIq6Z\n8WCOyYogEK8rof7aL6afP2ipKslSondsAJrNc/c6G8NZefL7KzuoOygljo5g\nNqojREbkdTLQnBwyBttwZGD2PhJc/df8GuumlJvdgW18iqSpj0oXMNzBvQlw\nIHI7\r\n=aBKL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQyusuqRGfq7VNewPjkFeNu83Kb+ZFe8NMbx7JWPBpBAiEAsCdwSOhqgFnmKUobyOmMxgoNrQRa4ijM+a6fD7KnVuI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.2c392ab3.0_1626965557319_0.07507974158750352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.e8bac95a.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Eqo9nomw9um5Q1BQMe2bZ7UfGFTcB4cRrRC+Ns5pbVTeDOMgIPa7p3dxQCD9NDBHEDeZKqC53heclGyT6+Etbg==","shasum":"9b26007d7564b93f72bed501568cc2c3115ef9bf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.e8bac95a.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b52CRA9TVsSAnZWagAA3rcP/A1+GRV+sOKZF8Aa5OUc\nu5xN48S1PHBWBIxyzKpV7NNYAUCPHmhX5q30q85Y+AYAV916mckdPFXA1GUD\nJb+7HuRlqaeQ6BcSZS4SXvNpV5CdRxpHPnLFdMI3l8XNT8yagXspSn5QWwOZ\n/eXudU/sw3qIBsOZzXFcH7iLYwzHJA/gEnnZXpDDNdX3aGIC/eiF/xspzTFJ\ndPudfwOCgCT2wVNXff7th/+zAlTNJajCboIDHDy3BVycPBCovS7pENASSdSv\nojJZ44+xz+sTyRUvr8XOls45MFa7GCCIaCm6Ll3MBS6+vBdCHPqo4vAOZwd7\ndqFU4b3qU6B8KbBnnUITd5PkQQjkzXTpYUC4lzfPTFR3vY5xDWG57m26iUVp\nQNby7XSjOgFWC9kZKWqUa9b1m6Z3lS97xck/aBSRrB1vPZiVBbxZbkfaVbUK\nBwhOl/hqa6vC0fYd3YX/vqODy4uGAIZHafInMBJukSzuO86tetUYg2ZbQab2\nx8ky3RccRPWNaHuT3L0YgnmclhjNb6dq984h1Tk54vHs9CNi1QDLUe4tieN4\nLVS4vz2OQgIyCkFw6LJKeWSnOAVKpqx+zvX7HLA5jmeo39wYDevWPEIQNl7p\nRaomyUeQjDSTn/y1nrQA4cBFJecyxNGwuPWAV/yLfT/6UD3dgQpVY+luncni\nWQtC\r\n=05ip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICa+EWO0hBtECIL3WLQ8Bm2IloYIRrptOv6a1adrnC5IAiB67xZxfQSAi9ezfrdVl1FgKsqOB7zMON5a5EpvMufQ0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.e8bac95a.0_1626979958251_0.6382503882280297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.38f29f8f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-weh/dYVMTDtXW+Mc2zwuXUgLwNieRL5yQFCvQ4iUB65skepwAoer5GjELMyOLVG6JDPZhf44Ao1WbrV1sW2YqQ==","shasum":"e10b3c58c1367ad6fc2c7375af69136ddaeb22e5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.38f29f8f.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdSCRA9TVsSAnZWagAAQ8YP/2PeMzDBnyNi5mscMCKB\nnzU7FnQOOwlkO7MvmcLHCAyqLvBaAfDbP43JyEzpQrlCycaiKlyp2cVURY1t\n7PVbitvy3RS/cJrPHn/4bLno3ox6bhDbz+fAOH1JQdWCeZoOEXq7r7HYElRE\n+tjLbCB8cd9SVEB4WEZp3O8pSHs/mIH84huwlvYB2yAEmdV4BRXyjiww7+5v\nCzYMo59llLQpumJP3QEGim2X/X1u1Z9Y/nBVpapyvd+ChMciUeIQ+UYmPg6j\nlgvE2W0eRc6LIQe2xeOKydkWU5tKGoHV2uVrho0Nr472axrqYdtIguweUHUR\nH8qWOGwfZ8qfdZVQpdFsMVx5C97ie31/ty5C1+w9krIvTgAdD+HYrDcXhJ1S\nf5VsaY/gnJeqSBmjwPT3PbYU55W/C+lGIDG394fJ4BoRLWsTSUuj1PCZdUZ1\nX/uZqUA1EtZ4nd4d8eQPhDMIrsOMxxJI+O2XoOF/mluy6Hc0ORG8lP90vYE9\ntpDrNeA2lTLbRdIM5lX/Ea+9PLkhPu85BrkDxFRbdSSjsY2hnvH88pTM7k5j\nB32AJ8269XzwQ8geL0u/7R+aW/nZUIRwFolEsAcIfYarmkiRmxsdvKC/Hp3N\ndAjroLiPspkzYiGTy4h+TGIkdwxrsqdNlr49xUoyhhvAk9lurdUHJgr1f9lR\nGs1u\r\n=x/t8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0uycOOd3buMsZ0PEKYS091OEDJ2X7InmXCNdj52qmlAiEA8/6vH3psEqBZa7Yk+br5WaEelRw0I3wJi7uc18/WZJk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.38f29f8f.0_1627064146270_0.5720085539238375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.e0693475.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y0EfFSyHIDt22haKrNKzqR/Q4aV0OVXQ8vn6JVt2QlDVIN5NOqXGHGgWd9mB45lW93hpO1tWCaVq/Bn3dAKCiA==","shasum":"6fd4ca7c7dc40ef1c67d595e135c767629e048e9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.e0693475.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xC6CRA9TVsSAnZWagAABTsQAJUdpuEaH3qbtwpDvmHx\nD0kdQJ61dGSMpFn4kz58Zz/dh+DG9AtaSmew23Olms2E/wGUL4o7Xa2Bcqlq\nBOiof7nZ70EAhPbbN2g5sVxZNR06aAt2WCkqkCjKCbcvssZHlZNTsqnJ0W0r\n6Vk1lDNEsVnO2mM+flfxjEEi3AfvRmqzPqhNs0AJK06DU+tm9aX8wJuEU+r0\nfxTTisgYLOvT2dBs1bNdsCA6c9+3X+dBeilJcDFKEvVYZVEHTwzJ6qa6o+vV\nuuRcAsVISB8AwfkbWX0pwRSoxh9/V7N1fpSCEfO514wOLZr4kxhbekDC6FOR\n0Ee1tTwRef19vwWnog4Ay/iAv1ZNdUnDXP2V0liENVO4Mez+BxQPDMcZd08a\nbA7/2PkU6Kc+/hG9NnXL1aT6gGqfmaMSEwH9O23D1zYBSIlnMH3gvC5J3+qb\ns6TwGqYlNzNNZ7THQBX0iHgczn1SIUHHmWT284WA2ypwcZdHe93mG6kvHLQf\nYilZZy83X5bbNTP9WcdMi0ByoGsAgApm9mwkGBMM5HvHPAebpVEt/VT5k1Iz\nk6y/IyncnoxOpOZuReJHsWVItXUcTlf2Eeyvh8hUW5IVmxwV3RmH4tFTOxFJ\nlwkSDZ3aLu0B6bjIip6tDba2y+z39wYwlD1aWVk4tHeTyUlB9bT3QTj7VPFe\nJDuI\r\n=DhpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSFRetqt7UwphZ8heLYQi5dT6ewU2V2LZEcv1n1Zgg2AiBxaakLU7kTAZfGMsgD9mNf2iMkBs+5d8js6Ug6qbRzPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.e0693475.0_1627066554278_0.7074111279784401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.d595e030.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ueV3RrPU4EIJNCBHMlYB6U2HGUm1cso1stqalW6ADfFV+IJnikGxaF9IH3/hpglgQ0i1KxlFlLRIr4IA84xJCg==","shasum":"afed09db97b4852798a0bc04efff2d14b560b9e3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.d595e030.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywoCRA9TVsSAnZWagAAvlIQAItUehhjzb5YDWeniVlG\n1QEInS0qnOk9FF5ewpA/9svaaBGF6J4VQwkfbQsFNU0duGvWN4fNp14N/hMw\nvtw1wcD7EXXkEH77EXuica5nZjL4OxqoP9NE/rrflA5vGy1FiqwIoIDmUNrj\ny+tslVKOdqdDYQhRTcolHZ+e8IEbQJkp8AcDJkfr94bwP4HtRU6gqJXnph3p\n4OZVwv4BPZy1OKfYwahHr4sdesaGx+DyY8B7xYP6ux6shLjfVZnkS4AUkJKx\nIDoR2+Yfwi7i8Wls7wuQn8uJC4S5HkAbAeZ4jqbM7h91iE6MF50HpwTaA8ZJ\nAzlP6V8nAlJ/4bBmJHl4KwKhONnr7hZYANqvAxpnJ3tBpenAX+tb5ezeU3p5\n6d7GB7kngQAxkEG6iwPmbHmdp899423Ekh5bEYxovV1mt06b7chDRNsO0vAZ\nvwqzpWjEXSYi3CfSzr6Bl7UuyAwa13FIUB3X341dXazCrmSTkGIX0C7TOZkY\n3BHqCcFWNvDgJHvLsYiBo54gM967D8Q79olNqf9eDfeZEsLHvdcOcHLUrEWa\nTTVSLFyDgL2+hVtWJl+SXYdgyUEs4P3SzpT0PJAeL3PJaAbYTUjEjxdQFBUY\nuTGLjqUjDgCPwNPf/HesQFbh24ekbdnbvtXPiqeY58GFQ2VufKVST56esVO6\nx6EK\r\n=SvWW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy35QOmnxjnnSfYC2tcjV0odXuSblPd06W0DXRzAAZdAIhAMTkO9aGMSof1c+AoOXSFVXpOcJTd5XQz0QhD9r9z5BZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.d595e030.0_1627073576508_0.8375135547203221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.fe7cca31.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"mwc-slider.js","module":"mwc-slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/slider":"=8.0.0-canary.01db89053.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/slider/images/basic.png\" height=\"48px\">\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Continuous\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/slider/images/basic.png\" height=\"48pxx\">\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/slider/images/discrete.gif\" height=\"80.5px\">\n\n```html\n<mwc-slider\n    step=\"5\"\n    pin\n    markers\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Styled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/slider/images/styled.gif\" height=\"79px\">\n\n```html\n<style>\n  mwc-slider {\n    --mdc-theme-secondary: orange;\n    --mdc-theme-text-primary-on-dark: green;\n  }\n</style>\n<mwc-slider\n    pin\n    markers\n    max=\"50\"\n    value=\"10\"\n    step=\"5\">\n</mwc-slider>\n```\n\n## API\n\n### Properties/Attributes\n\n| Name      | Type      | Default | Description\n| --------- | --------- |-------- | -----------\n| `value`   | `number`  | `0`     | Current value of the slider.\n| `min`     | `number`  | `0`     | Minimum value of the slider.\n| `max`     | `number`  | `100`   | Maximum value of the slider.\n| `step`    | `number`  | `0`     | When defined, the slider will quantize (round to the nearest multiple) all values to match that step value, except for the minimum and maximum values, which can always be set. When 0, quantization is disabled.<br> **NOTE:** Throws when <0.\n| `pin`     | `boolean` | `false` | Shows the thumb pin on a discrete slider.<br> **NOTE:** Numbers displayed inside the slider will be rounded to at most 3 decimal digits.\n| `markers` | `boolean` | `false` | Shows the tick marks for each step on the track when the slider is discrete.\n\n### Methods\n\n| Name     | 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 and on mousedown / touchstart).\n\n### Events\n\n| Event Name | Target       | Detail             | Description\n| ---------- | ------------ | ------------------ | -----------\n| `input`    | `mwc-slider` | `Slider`           | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `mwc-slider` | `Slider`           | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n### CSS Custom Properties\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n| `--mdc-slider-bg-color-behind-component` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/slider/images/color_fff.png) `white`   | Sets the color of the circle around the knob on the disabled slider to make it seem cut-out. May be necessary when placing a disabled slider on a different-colored background.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-text-primary-on-dark`   | Sets the color of the text in the pin.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GGq0OErHW+OYTQL33CJbEl6aX028/jtof6bOmv7xTns0ylZUqljJPoJbA8qB+kza6js5X13vuK5nQvYiKS+N4w==","shasum":"323ab5ba3dbc9667cf097dd33149b8ed673b7eaf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.fe7cca31.0.tgz","fileCount":13,"unpackedSize":65516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsQCRA9TVsSAnZWagAAtH8P/3tpvIoPA6odCfM9wTdx\nkLpOoDH7u3P/VRL8HXeO/EUtkXnBsnaLUKYVsBB6LfhYWs3LNtqvSn8RITFk\nRPjmv/ZkjfonTDhVuy5kjNE5gcufPqdnkyDJmF5XEVQwSMEzFVAKRTmrgXoY\nBoeKXgjYPehYxkke+gE6gdtjE1reFNZazLCcsJlmn7Ddvmh8nmmefU6hTkDU\nLNI9ZwoAxhWUWXc51ZhsJVuuU0VQfkdvmvTkfoP+2gKM8temVNm4veuYBphR\nCEcKgQEOIgFXfybsDWOsFK5XRpHOYLMAgFGF0dlIA43B8K0of/d+gBPjZNVU\nCyWTwXSvtSHISQJZanO6GHmpX13FApRCi6rKZvpELZNlR4HAJLODMbyKciDa\nK4GIH04c4PA8l1pvuPs3BhQMKF44TAdH8VkOnTHQVOskggYcncE5xAgSQMsn\nf7IUPFXT1qCd8rckfQdQrZlI3rwx4oWbxMmH9WkA6timj0C6qI3w0+iVx20X\nm59Z5qM/qj+uA8+pAcVfdoBzLOnFUQtZvxA/m9i3RUObN8FYtY5EMSujJaV3\nR2Bs/aIE3icJRbySrSFa2AiuL2oCbFjhXVdavBS9G9hOuLQTb7t8gerJt0/L\nD3/5uEPCuH2uKnwytRKJZ/TEXNMujLIcKWqDw8Ur8a753kvkKHtwwSexxOI5\n6vDP\r\n=UanX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6CRLEkb/tf39rCKW8qGoxdkM1XV3LPGmIgWn+6RIXgAiEAgqVdWuPoRMQKNnjyeZeOlS/iU7Im+rAaxQWFJRamsKI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.fe7cca31.0_1627077391889_0.14967047827173596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.fd9da483.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","@material/slider":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8aB1Y+A6Cc/TcUYl4AVeACWeqdR++UPSCyG0yC7Ks36xcHvGM8vCid1RNO0v4fSDV/Vo7Z0hSC+5X/v9oxS2gw==","shasum":"b09356d3f58331c7f89872eeee84771be741fd0e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.fd9da483.0.tgz","fileCount":26,"unpackedSize":162486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yg2CRA9TVsSAnZWagAAgGUP/1td9aH/OnAzSKq/4O0m\ne2KL+PcktNS1kp0AXpuWFg5poQ7xzNtzuwu7d756Aa9bqhhx/ZG+fcLWuYko\n1GhnN5d4Q31E2DGXkZopKvavepIwwePjQdax2H1sePWHPGi+kpPDnGvUy6Tw\nA+ymHXWWEYl5skcDMtpae3F02y9TMU7rpo904vIavIAUntSfsrZq2txOr6Qg\nBZxUIiqH6D8SrYd+X1+xFqdcRH1/SOuC00nc7xoQ+uJosW1M4KMl2oksQBil\nNBDai8uJnbnwcvdWhW24+ehIXhG7f1+uphnM3fke5Vje7Ohac/Dc728qKSuQ\nwhnOnLqSpngGeQLQH5lf5An6hWGg0v3ieXqJmzohBRQnm+ZCyCuNxt3dGoPA\nfxaxgDUGmQwSYcs0ZB9wcpiWRBVAI6F88E/LpgHOATRZYZFOphGiOTsf8ARh\njk1ZO6CtmZqrPIYKe5ZB8TrofdkNIYVBI9pBxNntEVrHvD7KhgUzaFACqLHd\navjLxOVwAmF4KG2SBvCffH5XGhjL5R2hRPk3WAbzEtwR9ePP3H43hTuvUVJy\nxrELVyMnQ+tqQy6N1KqiuX33fCNbxMFoJnZHwOFw16CcfFgFPCvodmJtd31u\nj+4OnwJGPmiYuBD/ekjazy+7G4O7GGi5ZY8Xrty7paGvU+N/MOeuM4zuW0pw\nTr5A\r\n=a28O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC20puowXj+DfMJkEqeHlDmMeqeDKQA555hQ7Tg2f+tIQIgYKC7Rxu7iv08gAeB+YKMxvjP8en5XG5eCE90ad/vC3g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.fd9da483.0_1627334710698_0.16333292582771652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","@material/slider":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e5GhG6QstQUKulY4S2Wq4ZQnCyrviAbsJ/Vso30pR4s5wBob3Zu0ox3ICJPHSSRtQF1G1sgmzho5/19aM7rw1A==","shasum":"2892b9d572d9efc384230488bdaa9c6de55c6db3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.8a4c7e06.0.tgz","fileCount":26,"unpackedSize":162538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrDCRA9TVsSAnZWagAA3I4QAIE/4As2z1Y9n3Gh+zm6\nNZCfKO03kUfVRwUFd0gpCDbLPCAAt0cvAwRid3zwciXRfq8OjZAQwLQ+IwgT\n6IPf/nfqqdZ6qQkbHpxemJVc32WG1BNx/ZZuELuVc08/pExymI815ZwXRMjb\nkFfb9J/6Yl5FR+tT85m5ydvwVQN7n1PvSWWHYfWRCrJ3VLsEcjU5AEZIt/Ot\nKEdBPV8QhJv++NY2mZK5xmLjD8ZaQOVMpexOjGbWgnFGI+0seNT/TQWfiMzF\ncEgtWj2O3scfzyvCuqvYnD5/QJ7RuVigZBpXMZM1h1lg5OMxq206QFvpGNEU\nW8Uyrz6gAjMDATQBfKzzqw2HXhxB1roA3AORufC7DZJhR2P8FAEs7ig9XeTw\nsp1kdoGO6TrwTmtOnq+h9dJRTgSPSoOTvNU42D1Jhv9kRc3XEwG9CnT9Okqp\njv5QYS3VE49au0yrv/OBH5fTuzQG1zX3DfAMHWo/cKdCOsIf/k8eViEJwqLH\nB8rUbg9+TfTOiXMwurcEqQLWM21yV7Z21R1EDjavYtjS465GdtOGJbtu0m7h\nl/Jq26dHbvFzb18JotSKvkj+F55t/evhHwawpS7qBtqTeAQUrW/CGLoKPx4i\noxqY4OcNeQJ3vlAfhCXPARYMbAGo0KimyzlFkkgVjUQhuXO3Ygu0dMDT0tcx\nJhQh\r\n=gQKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6Nc8bhR/kqchnYtKV+XhosLApScKnyzGYUTU1AQaMcAiBwcWvT9iaQLbX06vZxubpnOX4UdAB4qg9Qk3wG0LNp/g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.8a4c7e06.0_1627339458872_0.8524386529897927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.5b395fd1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","@material/slider":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lhT7SxI0FOXv1c9VfVDrUm1XZ1yIBuR0e8hsPNdxIXT3lkDftCuDuS2M6i1Vn9LF6APTJmr2FPLZyj5wTOkKiA==","shasum":"cacc84c3acc721fc3518c24746958227cf0bf4fc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.5b395fd1.0.tgz","fileCount":26,"unpackedSize":162666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5hCRA9TVsSAnZWagAAxo8QAI8/9q22NoLMgimCJjhy\n9iRPotdAroxRpGXfn41CXiYVfxeT7dEsuznJIsMvZQGUhk+OT7Im5n7IbCoI\nf2lg4ya7l8i3k0XWmD7e8cVdWuTiYb+dfc74KEFx8cpVwPHnDjIRtHnhoOeg\nJmjj6P1+eRD/GtJLSSLPi12RgViU536yCo0onAd4gttEMcf4cwErYklkjXqW\n75hYf3uoODdrqMJ9fbV4ybdrwBm55KXp98bSihcdNfGM7s8bLLUy0X9EZmZu\ns78Qeml9XVEJISO66nLsZwHxcURNOKnWmJKGEdOANlj2D7O+X3/mXO49Ng5a\n0gZwDgvkDhBhUn6oPZ9ctJfXBTHK5nLkoppdImUhH8h5LKVp5+FbI4VSH2xf\no/vomaKbg9zS5qzMkG2Fy0+mEFiQC6MgUbDfjfs6JSEoWq1a5pJU1rrwBdcp\nUMnRgGxnRwevcC4XEwzO6KlMXj4uhkkIZYzTHryqS87CVyZHcN09OLxb9lhM\nLTQgebPIBZZu5rCW4CfqC/FVXN0KWrhZ4cuPV0zr0Z7OKTWeriQiv2r6P8Ab\nRNZ9eZN/bAIYP09PuokMZIOhZwmIPrietEXSn09yKzlmamBSunpg6qTEduSk\n2hWIcyxO8j8wtxVWBS2Y9JuvawNuucs8jId+idvKUBg3IH6Tu7zOhiXeMF/X\nmkLT\r\n=AzXC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvtQrtcB3F9JJdE5LtXJWGt3pYdo9GX++gLLskGRmOegIhAM/robdCPdK64MyCAL+OliP9OFL31e7zTFQq2l37oVPU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.5b395fd1.0_1627426401735_0.27202917225743506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","@material/slider":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-saZ1a17PmbbePWMymmcjG26o69f/mzNsNFNrmT6Tibqmr+9T4wLiOxe7hKJRfdMIJ27mhtVtxC1ycPqqtUdpPw==","shasum":"d2960c19dffe1f780071403ce2faf92c61a7415d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.e5efdcc0.0.tgz","fileCount":26,"unpackedSize":162666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJlCRA9TVsSAnZWagAA/MIQAICEnMCNUZNJrbFnbOh0\nxbA1DnvuKtMbE7h1Ay/94ERCrqnAkUGeejmjKojRACanB5YRWasLxbMisAYL\nPZCBHdaxOGMHwhiIdASi5LsmjV9PQ5jGmUqiwuMzP1aRdkO10BdjRz8vdSX0\nUCc7MHIMfe6kUnF881ii46JhqRcap3juV9YVRI9jpkNChayDDJzPpHMK4K5d\nDa0OCxM6PAawxwPmQ54U0uuYct3H/KiT17FplttWn5wF1WhPWBz0JYF5G2nm\nWwB/7PIrocUkP2NmD5/vT54Kmyc+RMQNX9UsbB7NzTZCJIhF2aAI8CjwbkwO\nS4VFe3/JXLlpYJFEYWj7E8aMSokP52YrhiaZ0E6pYRy+3CqgWydo6PvENZMw\nCZjQEMY5EKJMEkJNMXyx1AO5WK6B0/MSp1xTYaud/wuhU+337S0CzXNPTI4Q\nv6Txiq1vJVYpOg7wD1QlK8TKzmSUOjmNOteIpfMbDpK9o1rkA4kU7zhstRc1\nti+uSs35dL3QN59MEQ/8enHQ1lSM5rVYrPSHS6r4u9pUT8GsNWwb38xJhpai\nK3oUdiZ2w2iXW7Qlkv9T1ILkUQ1grN5PLK0KFEj8EwiPta08Dl960MiOXlf7\nBeaEatxcCgtMdybK1wmZWnjvpZHzniexYoiw/0glwF2wDWmhmdEhabAM9jsM\nlf11\r\n=mzBv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZmwkQHD+SabGHuYx8H07VkfT5RuU8rW67D1hq57ZxsgIgIqrwKICAWtrVGiyZOLgDLzATI+06OgEjlZBisNVfnq4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.e5efdcc0.0_1627492964889_0.6176603725551904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.ab310900.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","@material/slider":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GlxYKji47C1ZyoFuGWRbWiA9W/mCkpzqlLzkTUjFmC7i9exTlLQu3zYj7RMnwvkX+6/zWI4NL6zAgaYAUMYj8w==","shasum":"1319479e2cc094086f73ecaaef3783198ac1844c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.ab310900.0.tgz","fileCount":26,"unpackedSize":162666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxSCRA9TVsSAnZWagAAZVUP/AhiMXKrh6Q5epYGpVTk\nrXs4YUQ34mzzxBOZ/fIWKZE0rSoYKvDjB6Os+6inLh9kTSSlgGBaginrLABt\n4/9meTuAC7IqC3diIVDqq+HMG2ohR8SWqUZGtOdqdBUWVxvXwvUBVz+sYVkL\nrZVTs2KjUB7AZPdNS0iShca3I1AiFomlvCNZaEgeB4RSnn1myA8rzSHsK5IE\nFjibb/nJz2s6TqeQUwbHRUcIheYsKPiiNGEW4cBh5puIgTUPLkumNaEPadiq\nJ6Ncjjv2Jn//y7DyNeLBJY5Oe8m6tu+bC0+Esz3Z8exrKrbLNaiqjOX6HycL\nzp7+/sGyBiDM0eLWwD15LOHXCTnHDk8q2BvY6Xqqc0vhdfLd7QFABUWlQWIc\nSun8ZXcU2ORjU4DNnCSU3wrRdlR+z3RenfkKC9Ply1/VInZdgbMFb8IzNevC\nD4FDepP6SH6feNglH3dX9WTlPh9U+HoMY7r6Va98/++mHxuDSFfty4AEUtD4\naFP437+PoTIlhpBoxdBJqoD+z6qM8xeQEuxOJPlZ8uoWsi1Gac/X0E0g3e0U\nM8JDuQxW1K53m693rCS/5iouTAtvu4kJrATpL0Q5+9BqWz08JP/L1AWtpEkS\nNov1BSgKvK6rWz2edaTRDyGDP33jahwcjdrIZArgYhho547Q4FfCxt4eoMFS\nDXnd\r\n=/6Re\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDIdSGs8NOkpMJVuFcDC06ql7ddXCn5wq/Q01dfvKUdAiEAuwEpEu4bL9ho/qyHZEDYGr5FA3RMYge1M/WJJXyoxHM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.ab310900.0_1627503698261_0.5401771413497967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","@material/slider":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3WzB31fO0INWjRx+JK9u+OmvWBV2CX0zOVRRs+9bCRIBut97a6pLi5dEm0Fjwa8H/N0FF53Z+r0CWKB01ypo1Q==","shasum":"217940683a13b3ed9ec6efd550fa2b560e15ff9a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.21dc9bc5.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1yCRA9TVsSAnZWagAAyxMP/jsOd+twaVig7FHEjJYy\n2mZhQGOLmwzcDPnsd6N6TbHY5pA89CGRUw1XtXovqoNTViUinE54ybh+wf/4\npwvghTfSBOuXA2R2xs0+LK6WYy20epvZ2CNFMF/t8P9yTNKA/H8x5gdMxPkj\niIECbHDa0DbnLDN8ccKgdmZDnU2838alDV9A1g/aygjV1E77OTDnq3v7vflz\nQvXaqeyB7zg4dAtpUl7+TwILrVsrOPbeK2h78NldNnnvDypa78KXzCfctot1\nw9K40aQYY3RFqznE+kOxFDAx6bI6Riy2l70CXyx9Lef08xNn9vEcnvy5eNl6\nZiEdS1D9ED1jQroRJSUikqrAW4ASfQTtC1jd3hR0F+d2YJNiEMuXpYnp+LxF\no8F8YMbSqrtalhGxKJxDOANNYswcpBr6m/QwI8T+a18CdL022wwQVMx9OemL\nEhZrK4qpfOGMO3naAruO+tD0KVDhFW5IIqAZrVWKnt36eAa2JHCDkzR5G2ji\nNsNCfKuOS527tk4ED7OvmmJag6AOo1j/cG1zUPJ1Q19ozzAAgd3OKdVrILtN\n/33KuyLUbN9nHN6QICCcKHc7R7fYDXCW7xYXQiYUfoUKHJ0PEn5sjrl+MRnk\nO+4bIO/muAVt/gY2LhQT7r7CHR6Y/5NPJmdkJK/qQKvwyDLk9j4sv1T9mSz5\nF76x\r\n=oX6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAzA9gvCgQK9mUDDI3Sv1ahFz3cNq9hS3ZcGW5MGxCtzAiBiMYdVro/HQeJuYMc3ePoQz61cAFTX3du2mqqDbym3Zg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.21dc9bc5.0_1627503986204_0.5618261800797375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","@material/slider":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cEqcUUCNJ2W8fP5jREGvbTI5LGEj3/YPg2Izu7puic2MBDBo5Lw1ZH/K5BXzsrY44KOu2r5DcAt8FeN3HlBUGw==","shasum":"607ffc250f81e4be4fe300ef47c8d9f1f7cc2411","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.68c7fe5c.0.tgz","fileCount":26,"unpackedSize":163150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQmCRA9TVsSAnZWagAAaoYP/0j+9pY31IAyxr8xMH8i\ngVd01sLoyDi/0B5Rnq6Z7VdOLsJ/sDRbCESxiC0bLp4szREXEu3/f6OannhW\nDI3XrMQHQYuE7HZ0YS5NzbyZpjIzlXGOUS3Hatj0XbclR5/+WELcWaWr4cEQ\nF6vL65x7fYePALkpk2tf/O8dv76nkuGc3LyqW6OzSs75M+luORbTKpyD0w1B\ndW0LsN6q9/3JTp08+lSa+a6aRYQY8T6Rz0sJqd9GVDLoEcaqSB9xR7rpdGbO\nM2x42QyiiFij6HDceuOW/eWd/7CT9bQxY4wIZl2W111+udKoqXrWbEbjC9Ve\nMfrPuFrux9LFHEx2R8QRSmt3ayV71FvBHQhUv5fMGgGS7uiv2Pm8ISnADeAJ\n3E7/k6R+2O80GTxZMCuvE1QVOnxcaXDPq3qW3zZZV9tIMOwnnuQqmA81DXHC\nvP/mAerbF90z112z0rnN+HT8dZREACfrILAld9nuK/a3/AEf7QgNLgFSSr0Q\noC8EDdKR2Gh3z75XkObzXN43gGsJpP/oZF0ZLgT67vmd+fjvfSsoWsSgwESj\nFVSG1pDncHA1LBPFVmeMLN9fRSY5rGINvMf1eclRYonl3Ig+4+J9LoeA4hBB\nhlr6IWRPHbMtmiTD8basZV73VRZKb4G4X9yMTin3QE/zPc+YopngBjK8+x2Z\n2imV\r\n=mfpN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVdM/dFDfOkdcbvQagLogHsqakhduE3rRKve5M+ztgwQIgVdD3Ew0MlXo+rTn5gKwdBqfxFNF5Z6vr3ZgTmTfp06U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.68c7fe5c.0_1627583526763_0.06290990542850183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.aebe39e8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","@material/slider":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ORFHDzL9FUKcEy9yVEtpFUD3o8ScL4970+tzPhdi/ZenkjqgOJ/sg6qJWeSzRmyGbIKrfTNt7r4S3QQ1WHmqfg==","shasum":"32dca97c147bd674feae2eeb502844bf96c9ce34","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.aebe39e8.0.tgz","fileCount":26,"unpackedSize":163150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE96CRA9TVsSAnZWagAA0IYP/iTfus64WRabDxG0shkn\n0wopuyu94iVGCgeQDLsIcFgE/8XDF4v8KVMotYMoZdYKotnkllc7nR+I8vk+\nH+C6F0ppXeaOAyp5OYvezryHS2449GsD1ahSKvUO0t5g0EjhHIUevmaOc3CJ\nOLPUqK9uJJJZ4yJGDJSuwg5KPa/ZIT1UNDJhTjfhj135VtjmYwOAf9L+LaOo\nL2QXr45nWpcONm41/6raHLHn02LrfF9Y4mcRbbyDATl3R8N1MnIuHVKXMpjw\nOfbSro8zoO97NiXgd8jtUEpRlQcstBp6I1qzGTlGNanLY8k7OyNIse6FAkqO\nhX9xRT6809wyfyWxJbh+LqVlThxJyYVp0cmCgLKuM2xfqKFAvRxcWwXS4WNe\nRVevt/BkPNRRUZ9DbciUrH+oK17jb1UqvXVO5mpfLkCWWGxTCXYLzNgjR4Zl\n8BwqdHJ/mzz4cSvzJ8WRJSFt++PfzKZ3j5c+0TJ13/Vgg7SZSL1+ypGMKOVM\nh6bxi6OanWXEUayeztQ8sb2T7//pFM4kQZCYiBRDwJvqxYFS3Op2AuHkrx4/\ngtqaUmbutBx9VsJoK2Dt3j3sK3vvOoMoZfwfrsoMZxgTdx2EPg45A5XT7Ocx\nn8GeDNVgKvOL/XSv+w1BoCcykHByn8b93kZXFKWsBNdbzolmP+jqKARuiHgP\nxoQJ\r\n=ooaV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrrsJgNRbM7Ts5TalBFMXcpUHjBq62SFDQD3dQ49FnvAIhAOr6XjWa8xYGjl5VIoXsnjAUcWoYna8Z3qtjlzMDFOyo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.aebe39e8.0_1627672442614_0.7417342226229322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.ea889c69.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","@material/slider":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H6/XhhP1OPHbWp/W0/ek8R+OCmwCENF2t8wkF87K+JqDCLor/gzqvBU/AB+Qf5iBhf1wCWa5qcwQVx47PrJL6w==","shasum":"29e85f28a915e75b1d9f489d91e1e65ae5c7a040","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.ea889c69.0.tgz","fileCount":26,"unpackedSize":163150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9hCRA9TVsSAnZWagAA6/gP/3mlsu1vI4+AnbitBv9M\nESKU9Rdzck4AOj82MVJyL1ALC54Rj9WeaXsuNYdAj2X2dE6x6Xpc8D1IGcp1\nL3CFNpXXAWwM9Vf0fNl1jveFz8xbnSl9NQ8qmAOghWNaHvBw1pnloZyAr06M\n+cLBEiijBPnZBksijbP9OECajOvQDNHfstvRcv7ejflUgAw7g/phknAWQSTt\nj+uY5pjAWSiJXAgzyiEqK66wd+Hnw5INRj9aXGZyTcT4BT7MfYfLZxsaXPqc\n8+30dCazFSTpOZV8C+O1S+Zj4Vm1+jl73r8/ParF+VRwcW2UrBohqk5r0WOT\nfvpl5Uob6fjiEeku1H1Mr254wzHZDRoWm08SAbfdDH9Zma5q9Cv2r7M3CSnY\ndn9Wp1ugN6vwToSReIZS0YX8KMys4SYdVBPNCVtM5isEwIBhi3FrkdooFGaI\nSSzh5p1XL00N3yA6nEuVBYDszfK0Sm5nJf9WYB2h1GvZmRQa1nLOhQsJx7Kk\nP0+xZaHQ01BjJ9Q+2PrZYttxYihDM6joJJcMc6q5EhI53izJ4HJoEif82mdO\npxTPJth/dn78oaHMZ8J1iArz9U8mB1XUTumXI+oVY/48rtA8RVpp2DppQ9QE\nqwq1JCYhHBrUHR35O02suPRa3V+NfehycF53E7o7FeSQ5nU1o8/2CqWRjEeo\npllC\r\n=aeE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDEBozU33lNpIT+0AKHx8T0AGhRlKxl891hcNKW7HbWAiEA3fZ8W1eIpI1kIr/63yz6K8DIb1JPtKfbNLLBlKadYI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.ea889c69.0_1628016481457_0.33423088711828464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.21918905.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","@material/slider":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QjUSs9aPp7L1D7rb4Ry9bDurdoNiYmJGyPN8va2rFjU6MvzogJPe6QO1ThCy9lFOvcTM7vHULt1mb3hsafRPFg==","shasum":"0eec2b56642283365f393284f4552bca4eda2afc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.21918905.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHFCRA9TVsSAnZWagAAv4IP/iA1eArJvLop4MXTdpjp\n+wsZBA/4ITTw1ayTNyXX2cifhxEUYFNEwfJZaXy2n4o8fTWeKoe+Jze1QO43\nausZ2k3byW78gVEXlC5sC4DoClHwNCfrhVAVoGz1sbh4MwcvaDtBQmMQOWC6\nIzafnsUWQge0qgu6etwmUmJT0qp+4e2HUJeJpj6uTLjXU5DavH//tA/vYq44\n1jTrBPyndz6sBvFOEz3TmNv+g7x22B5dl9KuNpaGeepYSx6JFScfv0xHlckf\nvpQMQqwzeHVk5GPhVU02dW2QiSNrYIc2+hzZE2WuJeaHdRTHj0u94q84ANVm\npfxB+vG5KUw0B0Ik7NQGGpWKMFNC1ouR1CJ4tVdGGLW3AFKg4mL56b21RlRK\n2G0NrN69St0M7N8TdAhnZIum1A2C0EYxCF4g7QefWMo9LnM+LVT6FElUwueM\nEcJwKMKPBWhKVwZe+6Q1Ned4vTylPSr6/hS8y14aS2Qg75Smsbcxhnoj9xVi\nF7UUjhf4eRf+PKs2fvgvv1KTDE1cSRTboMjNgl2naJwxQQ+WNOIDauX1JiNl\n6mONz/tx7UhINeYNZ0aCB8vloCBWIvs9WRRg4EwIkvibIa3FLfUxTAim0ov3\n3ObxR0qNBaMMbbzqtb1xmXCtL0Zraf03DewpL+LT9pHXKS+4cyay/rgz+1VA\nyMuK\r\n=6WI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7ARoupJOp4JWsYpTfIZVMyJrXParEXUBR8Xx/E0tXLwIgXcHpoVkC7O17A0T0tt8RBTu+TkYJUzlSQnD2Evd92zk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.21918905.0_1628025284846_0.1160069744149228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.193c87be.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","@material/slider":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Gog9vm1mETTLgm1Gq1T3aHETy5Bs6sdV2ZyxkBb2OStej6q5EMUxYD1ph+Q8EKS3RCXptyvr3fCYSdzdCCqA8g==","shasum":"89077e18a91a30cb26ccd4e0835248f58756a77c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.193c87be.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtd9CRA9TVsSAnZWagAA4YMP/0XHQSOMAvQFmSD2Jijc\nE6aUe/LlP2na/wpc2IuuckQnmqoktYAiPAOyw0LfrSFx3f6ExbQGZUesZ9V6\nO+I2SzmtQtSHvBUcnYB8tNVR5+NFe2LQKlXLEeA1dcPtJuI1uEf6l0vbiyWI\n1qymPrBAt9azAA/tm+Lur4x5j71db02aEfTa7DOhfWe5E1emdNhQHiEdsWWP\n9yhjyeJkAYnlscKSoMSCS0vUJURm8umOBF65vPpC4+q7t9d9IB90BImWd30L\nZZNTW8f5vguHYqVvLKsG4VkeRKZOggIaGWQuCDjnxGgl38sXtTF19XA2pj58\ndk5hD8rD7ylnz4HvfthgUluaVQ9dXt98v0vBiK/PWcHncIhXxXFlR4HbfhC0\n7L2PFKObee5OXlQj/GCDXfL5jpjMbO7EsZ7/Fp0N6ITAWGRvwsGSiOls1ocC\nKFIG+SV3RtMZGnGdc3M/6ZVXASv+1hmfuerj3eyEwlPkoJhGlnH/D4y1sToj\nxdCe7QLmAIU2woNVCxcSqxM8sykkDwlyyGNgAKG+dDNV1ockWDBSqh9Liffs\ngbGe8SZiV369TPkIj6xCMGq31QEeC3oF7QVBgX+RdThvJFRr/9xluH/RjCxe\nj2xQ5OOBN2GgWvZONATmCNr0iV7LTJtjm/nCr3LOsl+Xs1TzKEKi2a2vrSFU\nQst8\r\n=vR2d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXrfeR1hE18bYd7h9pOKZcpSOGU8k8yL5LSb5HJF8O7AiAybeJGLdfpN/df1I8c0rh25eyCpzLUoWRcm5tBzL7uiQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.193c87be.0_1628100476956_0.6207959882998879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","@material/slider":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jRMZZ3Xwb8Ml+/3+2eHJ6uTOpFlpKsJkJsbPBRYRGDJPw4oYugBJCa2Kjo7j2X4iu6Fg99T+GFp0GSAXjfydWQ==","shasum":"bea11f693ab3837af1c6de8ae11a2bb74b19a963","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.6fc52d8b.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCm+CRA9TVsSAnZWagAAR2oP/A/Xx9+4R7kCjxD+Q5aH\n+kBz7+NGjFP0+phBNSpY/Ft4buh5pfNcxwSupkHYDmQSZC/r8BZKtJtZHirO\nCcAH66O68CxyRMez9kN5HNiVQxqTgexl7VkfxRoa5o0GevFQWTAgeBiQVd9x\nFouURNPDNpbtWQXA9nvsVSaIKFtWEiG+Qt5t6nBxwucRAh1SJVjYscxWqGxZ\nEEKFAfJYDBv6r7LZ75NB4kcphEgrly2yAjNXa/J0apjydDTDG7jDUI2K/uhi\n98saPRW8LDr3m+AptGAbq94SrO3PbbdmqxJ+1C6TiJKXYhOScx4Cv7KZ4Xcy\nM7O1GohU4vP1tOCFNJCXwk3frW3/23PRHF3Z/dT54GVi72y7FkY6mtwTR0vK\nsDvagRnZwHKumbtIDkZztbhz/SAsFHddFlpacBOs9LwAeVvRZ4CtbP6UYnmR\n+d1lonV+shEG5zLTUET24zcvJ/pbyRchcn36OkzXGJAHgneYquJRhCTC9pVY\n1xAB+KwiCH/dwbS9K6nY1LjLv/B6KuMvMGOKLR8ydOtXOTI0uDcL6r3wqvT6\nSNzkUSHEBWhnmkUSbqjs72cTLXpMNpqxkugSsFQEFkwAyua5HnsV5RFV5aU6\nE12T5kHwlhtrYB43i0XmkMLjfNTpZJSVB69LqU9IYIXm8KZhzOyfHmO/nv7+\nMcqO\r\n=asxw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJLoLAAi1aPMVNDwXGwB/Xgr89vT2V2sMsChgTP7SWAAiAfAxgJ2F6bwBJJFwyHN+4vCLyD/4YKZ9gAOewiOIn1jg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.6fc52d8b.0_1628187069825_0.796301302873522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.e2e9777d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","@material/slider":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-im2Wz/ukTTJjFx2+2FZs7NLs43Dca6vEurprKSF+84P035RG2mPlPHFm0uYZtwrDy2bFGWAVl20lbX4wS0urKg==","shasum":"0b27ea87740665bcee0c95123a0749591df8d3d8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.e2e9777d.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqSCRA9TVsSAnZWagAAiI4P/iAE3DADmZKimylrW+dA\nTb19Li0Mduh+ApbhlbBzDxRkqwwgblzZSYL8bvxCnRKhY+oM/Nc2E6KcPq43\n0YVJ3oGBp1x57ilYqza+Obv70OStFfgI2bQrJprXpcnw5oayPXuzOixf42W/\nrBf5PWcNAZB/jkxIb6O/vjzOWzxIe4O995GWK9k4rmrvHCb8TILLJsxzD00I\nnVj1AM/vamuXJhUFz2BKnPklX5dYe2qRPYpTDhc25jKxbZaMGYHG9Bqfa/rX\nDc0/d1cstAbPmTZswzC97IZ5Q1Ntqqy0JtXxpAm40RR3JqIWSonZoXSe991g\nazmX51Jho42YmDd6b/3tUBCR80/S3ZZ4JMsCMqGN/0Louq9kAuuCRWj0u5AE\nS1WoLvctzNjnioYsjzLKz84W8e1mhCFCr3abEuo+NbyaZoJNi8GuMl948nol\nnB0eAQrQhEGTOi6NCdTHisxah7/g7Ew1rDAZw0MxFc4NOshT2NGhTOvLulnw\na0K+8k2AjNXmTtZx9S+Nq1dHWIz1g1qaEn2RtzSm917DSAb3W9iZZletsc9V\nUAVohega7Ap7mVQ66EgfHv3qfZ9/Tw9+Ftgyc3gNYEU938ywIDJwPCXc+Pfv\nfYzfuAwu4dA7eWM28XZue5L9v0xQXcyCeMQ455F4xMP7RVXs2mB1gknOQtE8\nJeh/\r\n=KpFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxbkR4dS8Iky5gygCTefP+clPgljXHWFEbxQsDVENFVAIgbjRbByP1Ur/1CDUpfxszCpJMVP/Wv9A3FTniffCZkkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.e2e9777d.0_1628203666013_0.8342174242174794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.72ff1e68.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","@material/slider":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-md+aetGzYmf3xmOnVflAvGd6hC2h8s33IhONGXT2O0POypFZ/TcdAAxxxDZB8Cd7su/wD7D8AMMhuh62NGa9lw==","shasum":"596a0683907a340c7eea3e9c108fbbb65b5db7e5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.72ff1e68.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBCCRA9TVsSAnZWagAAZw4P/0p96pQLiJ98o+OP1Cqi\njEOIkbI0IfSstu2JxlfTncqHC62ZaxbWvSWwEFu2muCN9ZrpyBI42ahdwI3k\nFGyQNqEVBJqQNkw1KJKoIB7+ZqrA+R6yS3UJWdFVh77Q6Et5U0wos+Rg624M\nhgDh76KQ/Qp9JrQD9UpPJtW68mYO61Csw32SuTCjwtM/35AXNLxK1IRb8JTH\njpGBa9QbH76YnpmERL+mwceeH1pf+p+YMeHVvPG8GBLBjK+3/5DkWqBOVDIb\nNW7e2iKGSQb0zuqbQNgvazTDwsEyoVFyqeq6kmB01YPAJY9pFJVT4SQyQaDc\nOJ8UbNVMRH6Hh87axLpHbMvg4jTiG+ObrJkqRpNsgpULKNuK+U24nrdtiWiS\nRmGTAcKGRSDf488XOwL6FtK1LqNRSiO8c5vWIaoHlAqlP+tu1LQ8wTe73S1i\nzT3MhaOhaD1eldBP29Gi7wiJDE3i4AuUN2rkbsLvT8fKx+bWR/STUfeePVnx\nge6dSzaRlK0YKDkDBKJSUlEiR/IShreUjOf73PY9rxTSAPY3Ngk6GbNUdTHx\nn42SdXt9Fg3m+qMsAY8tuL6zPzO+bwp7H3AF0GLT8darLEdxr43o4MCGTvNk\nXB9X4d8xGxGrrpmX2kgcxqOuQJuYKXAjk8R7yflsZDTj8vSCCbd6AQ3gRO1W\nB+wo\r\n=ylro\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqvCw8piBnAUSc/1jikVhUpPlkT3X5B/qcQRTDb75AiAiAzjXXBX+jZPrT5D3L8h6ud+JhlcNoNCdKXcGRZBgqAdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.72ff1e68.0_1628282945993_0.7754945914129965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.c527e93b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","@material/slider":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zh/BDLmU4eZ8YWou23NjyIt7n01bG7MTcCJPnMpxFXfYQJITGbPx9I1Pl5V20UDEAtS4pKNEOK3OwZ+PgdUvFQ==","shasum":"063c6d0f00d16427f402e6d7dc398df0ce324e3a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.c527e93b.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVYCRA9TVsSAnZWagAAPF4QAISMBQy4D6lgHxk6mkHZ\nX1igHxlmXXdSAacXuMoDhf90VQ6bBJi/qJKLQHj0ysTkEnAeJ03Q4jMDu4+c\nlRSvFQYGlU2sYzCne47Z7USUQMy8w5s2EMXDNFNG7AH2Mxsq+bvAn9kQXk2/\n1l4EPjWX1cyY4POkEmogI3X6NK1Ba/jIUfCl5i+1zKrQUl9BYTYLOV6rnQQP\nn7HrqZVXjp+Lq2fSjc9RGPFKCBBcHIW7B4JolvcOhRdZpk1oLVEryEdkB5f7\nrjCw6EbAhDbbe2J2NYU45G5wGttlZYLMT6TldnuNg+Ris/3jmitDI8Wmdgb0\nxuwMDuDueOutnrJm810BFmGRUij1U1zz4PCyRQxPKNGLkJjlP6yxmbf2jR02\nNfkae/EjMtL0GoM2pIH3Gze0Xw7v+vrr0uuISpzme1FC9bfLJ6M2tBzGLvL9\n0Ij6Fhrr+Q2bBGgurlGXPI0yrjJ9JEDxsyqLVNWwUNfcfBAUd1Ht2Y4EyVtb\nqKABLwpTq9SmQyD4UVz6VG1IJDLrknz3eqOTWPaPf/qvuRRG7dIacnGQqhni\nJkSKX767xV9EUuUkXL1kWL/2bvEIZYilMpy0oLKTgniU9QOmVcQ+WI5BkY5w\nhrlbJFKVWhEK8GVpvONs4zQiIVPrlLTluvfaEf7Y5J9RTHFkdTUVCFaTzmMD\nLenn\r\n=ZYXy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2cp1Fs1UQ3/R0QcJXnnWffubPrZBAviPV7ivgp5yEgAiAUFQFigmJjo9+7XMR7uywHf43cYiBo9fO81HL+oFvOwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.c527e93b.0_1628284248527_0.06947967485175344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.78b1eaac.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","@material/slider":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+ip84FLvvXlCoaakpFnYaUJBAAKqSQDpTaNpcon/z+Zd99k0iUtoAZb6xYkMFP5abPgHfzaFRPwy44hi3ScWxw==","shasum":"bf7695671d0861b7d59d4670532169f54cadce20","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.78b1eaac.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4aCRA9TVsSAnZWagAAZvkP/1PXed02kBcWz/SeHm2o\n6CJNxD7n3IWhrZZc0VKX6q1fZeH+r3oRby+1yPIifm4sAcaarME2aWzYm/t8\nV2r8+fCUwVj0MqkVU7TN3qn/5R93OTYIxC4rzqq9z5OShsqTKs24KevH3J3N\nuNE8f1IZTYwAW8Y1K+Q02rdQ0aDdEnIVLtMI4YBOsK1e1UnGBOivkd+Y6iI6\nwRoto1p2w8RDIevK6aoj6qhc5+9IW/WlK6ETpwm4BEPBTjHzQzZV9Nfu8TTX\nErcjTeAGt+LeX8EHu0bpcvZESk96hYhzRDuqek0VJK2KOxSis0AVkrA51rDH\nDd/XXASiRXdxu+wcJYm6oUdUt+owes/KI0jPMMkzYXMe+FUyB0l+/GZDd4iL\nQewbYVVBC/w2eEDrjRnMKdfLLe5mg7mVB5HGFn68spFZFZgzdSamL8KnyZh/\nwGfg/RGlGLp1C+kdl9iVxafyia+SgAxmbsuknz2PE+z0YbpSLf/5ODuoHPmK\nybP+mtdPEvzMYeeZFuvycOD0RhS3JZ8gmJ1Vcn2e5+IoTFafXl2SIaJI7kJZ\nUjjVOdDvYNmWw5BRa9uW96RMZGoA0hLMEwU0/nb7KxJzGwJL9VTIk61MexSm\ncFldIW0RR43mtmwKiHwFZOleu5VfT4otdANwqdSl9h4f0Yn1ER3FutKN3wgz\n8PfF\r\n=ZBt4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMTfnmjb6KJf0BrcAtB+mBmc5sy8fBTERxfOh/EnTU7AIhALp3h4/QJqZr8zXkmAbtuDCOAYZbYNrgAtsIxg6PwJcH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.78b1eaac.0_1628532249844_0.5478610279444809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","@material/slider":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VECGwFzodRHh9K3f1Pgh4LwgUtqMJhmB44kGgPdLvnuqH4pdhLhvKcMJYXoM9pjRvSrFssr/lEFCTYyl8DZbkw==","shasum":"a00f22f3d16b19116f239c1f2af6c1a36ade0593","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmyCRA9TVsSAnZWagAASzUQAI2xBbKMioYIogI67MNj\nKlQKg/22Vh4US5Nhj93648ToI9s3HjBjJv7kjge3Ilt6JH8sb0k9TRPW4J0A\nKF2mtZIMr7crC/y1r2Bd+5HEXr3roxMXqpa7S7K1LFP3YZ7qflrZHj4T4bHg\nyIfclHmZLgQyLetkDX9mhig7JZTLoSH/rTZOcM2ss6fznpbeysOQ11JWBP5w\n/sv+LXgxrHGLjsNo0rxJstQPiWJ0Du7DRMuX8ytS88eudn/KaelTIfR8+Y6l\n7sEOw+66SkF69SpL1KZQMbe8CXPiqMfA4gS1g2f/Urjjle3gyajnWU4T3y9s\n3EXEaS0nvvthiPI/Vls1lUZPMIfQmQ/uGneAhoQD1yk6FWsjTFEoZZIeQeIK\nkzHhBMd0bH0PVIdl/YSF0+2/cvavv6YieU9By78qmYNLBzkco2/Zp1bv2x9M\n4r9gWJUsdexAEbCTmiH3/lTOjSTI3FD15XLWAE2xdcb0U2oWA0+VgYwC81OB\nSH2i3c7W5ZjpWZXmWvtwCsdRZSD1j4wzV0SpVkdaBZcuCiLakuDQh6MpDeIq\nldsPbRDnV2dbk8zx7wn/ETWQzXP5AaRS/uobH8BTC91L+UnixyaaCNUls7aB\nzUyLtWlTbNj/UQeEIjuqM2INB1kO0SxsRaN/SmFPgSlJYMufZtH7RcImYi0e\nkQe2\r\n=mgyP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjNeFGCL0mIgy3tHj7KsOPN8B1eOmfJ0HWfqhAa5c98AiAfPES6Vei5vOYPWGgBmkjMwVotCQ38+Lpu9WCXrKL8WQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.a8a4ddc9.0_1628621234052_0.9197111315333275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.99fc0632.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","@material/slider":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N0UzYT6vaZ33Jmm4+1QEZUCEwFFUEb7cAiBkPZPchYgFoDHsA6Hp7nGgCS3FELbR9ISlSp7wTpwYDEihB0YmXA==","shasum":"bd3a8eb947d23d3a777eec4a00113477a1dc555d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.99fc0632.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2DCRA9TVsSAnZWagAAUPcP/3m0+S8uglsW1E3e1BJh\n0q79Q/JMb7t9SqGI93tFZH/vDBK0tuQjl1dzZGMvyF99TiKe6jidT5etmXZO\nY9961LIfqWLcEJE5K1bv/khYN+zHv9YjGNMixC1SvFFY9pYXgM63KhEftIbF\nbwqvDG1fL7f/kcVpkgKBCi28w1JBi6SXnqgFwSfC9Iw4RFhceYurL1jD5gT7\nn/0cdoEnO5cbmCONt9hM+7DYdW5blPhBfTrwKlRpSOQJJNm3bjNPaTa9tvfR\nm1VqfwLLptFgDvi2OFk00GfiQ1BTqme8bj7L93vsk75ktTN7VqzTZwPoSpcF\ntgEK78EYEvnzGYuPCyrjdr+6FfflfeJQumjpvu/AQAZSdFBhKvJgzB+eqUmR\nOHwrUgv9NxTcOt2sIG5q/6RFolxkfhnJp4QRVDTKsgnq4uFXxTp9wE58KaNe\nsAxtQ/TnAsBOWq73qPLWzyrPHDAz66MVPxni9JmDtv5g4K/7Ko+lYgiXlf6z\nUhI8NrDdamPTMSnCIg3x7bWmpklY9g3ishORSZPD/7V2kzjfIqIyRpulf2eF\n47InFO35aqzprkStiFxwwGuve+0eyrFQ3k4BozJpLK0ThrMDTofTXzBDNmnv\np5/Q2X9mgkHM6AnlYVAtcU9Mnnf7BfOv73skZaSlOjpkZL8tLmT/CSEYKmnX\nfE9z\r\n=/xwB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVJ+cHG293kHBbvaPcyE7iualWHhDrg5NjKzZWEIOpAQIhAP1qu6/I44YDLf3Z04rPh4encSVL/6a6Y5my9e3lWenQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.99fc0632.0_1628720515343_0.21232740968547215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.3f47ae57.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","@material/slider":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fHKsNuMSkG8mAmLpUh2W69WUovFKHSEuMxNBO81bsqTwEdiwLCxURpEB7xGwGK18YEuBcbBXmwydVyJKk2arfA==","shasum":"f6755021cd58b796d5f79e80bf15b6c4907cf840","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.3f47ae57.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGzCRA9TVsSAnZWagAAKrYP/1jKuTGsy85A/thldjTi\nqEp67DmeFvcErW40FkesFH5H8fsPdbGrcFKQMwMeBrT6uZ8lgCCMcIJrjuhP\n2o9oWofxkuIAk9YZCqYy9lA5yPWxDpjNrjV6fnL/I8gh1PEMXgMl7Po3bhh9\n+OEH/4cX87XhiNIWMy7EIZ2zxanadVurUEpzKn27leBifvkMEQTHDbTEfMN2\nYDIfp3Gl8acX5PY5ax993IDyPZsBFtFK7VAVPkEDYKPnlj/SiNuOo5KZ868S\nRd4E/6+xW4Vf8IwzLaZzdILQEuoI0KoZXzJfzlKb8CTn8aKzLTtW7oLyal7z\n1k/vGtgdVzYzSI66Jf9uq9qR31C7drF05qDihGlUE7QDyrFZyiSFI7BmzY9A\n+EP0xeun1uaLQOwyBEvtg1BymWbN0OEu/0OiSgJEnt8YT7ifRjd2FaRW7dUD\nB4/u96s/SVWcXsYNlDM6vkz3x/WV81eC4oXrj38qXIOvsRR7jybrAgLVoCXh\nFTQXShmzebcTEqA98z0d+9KqGectsi/kbejV67ISK6S06+PcxUi8CJm9wkOq\nIHL2MnrijeaB8l/3AEbhwGWyt2f/lNlZhPmtR0U1Uf2wQus+Dve57RogohBb\nNxxKzkF++dQocw96zF1bhHmNW3zr9k0MoBbT12rMmdogJL/lKEuX3O6uxlJD\nIe3N\r\n=M67y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtpzaveurCEccLRSWmuHibLHBK1rCnM52eKhH5pvTm8AIhAKOKg8hAecTvm+ZdVP7VnjzktKrYZMCUlJb063i1Lj6t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.3f47ae57.0_1628791219471_0.5094563524822204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","@material/slider":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7CmdfmaKHoOJnz633Gu4ng881pGbkxqTk2Cv/spUqMYT32YZtWLShlRSMJnDtxQIxKHPyUSv2nYaXIkgaFKM4w==","shasum":"a136340a0310b97d17242653897ad3ccfe4e9571","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.6b9bfc32.0.tgz","fileCount":26,"unpackedSize":163293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdcCRA9TVsSAnZWagAAc+IP/AsLqN6aezLRf2o6vaqS\nsLFDwCLaqoeQQ+COwHuhcSl+Y9Hb+7vmiHMt4H/cugE38FKrUlBkZRqc83jp\nn1v2SfvG8HzyAdWoBvhc8C45FonlMVV3YD+zzdJx7p9PVFkr9edaKqFDxpls\n4/F0p/wfD9RNQn5pVAn4FV30xtKDGpxQLkKWL1Wf50z+Uhfzn7sKr7/71KZn\nlnc1smpJibhsearV/8WizlvUkv2ycoN1nqi6HdKcXm1whXPEDDljJCoaxpS5\nTdcCpuyBYo4LC6HfroRgtF/aMWGu3O3hrYld3mxnVQmXw8/ge0DfES6bzTdb\nqw2V9aEKuXTCfxE59YIxgg7K0eEQO5F+wHaHfosXZg5Xw5r8CViHDMpv74+/\nM69QxVxUCqQcl9WUBdJLlZfuY8SO7kCHHgxtt3qMLWfGVOkQc7DmvlYrmWJq\nLTjqGxClpRvzUMY1v6PKwEL8dWmSgDdKYrHmyjCxlUfT5L3bhkmKC/arUwZD\neQd/SoVH/XFWosfepSnxX04v2dsw5cxljheW5JisTFCGpYIoakY6DQQ1BUJ/\nMzA+YV86HQUrJqLbBlK5LiuPiRTVJKRe1L5EnHbuNt1CHwnZ/LgA1JwmtNze\nrzEXmPS6nfjnn16dZDCo8NsqlcF5mshfq+grVjX5AbUk4b7D91rTTxnZiHAR\nA1ox\r\n=7hzQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBWMsdrAD9Cc6+oIugwhe8ACsIbJ5QmBzVcgEc+5JZSAIgHwGTDmk1o2duVioCK5ibNgSymkclG75qxfwLgIZIRo4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.6b9bfc32.0_1628792668637_0.854936095174254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.c89ecc63.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","@material/slider":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kZvE9SezpS3zotv03KiMhQcQa3FMvz9jpaIMwI/+V+7l4bblsuqkeB/ULbWI+F0Mek5yO8zMR5c5NnsUQqcwYA==","shasum":"e112e41a0aa8fb646d949f199cb8952c10a5214b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.c89ecc63.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2bCRA9TVsSAnZWagAAbpcP/RA2tZgBv8lbBxsqAUx+\noW0B/JFIz5y0gMqV1oglqMLfN7s/IzUZg0MlvJngNhuYBKxxNCjjQvui5Enu\ndArNXmE372QmmpG+QVcDEsd9gHQgC5vNcJrJbB/vsTTadI4JQD5Oln3MC6RZ\nCNDIgHfBtmJlPM3Q5FWUiYvm5qlsEGLXDWmap9CKOIJHaBbnfvln0KkDJ2Rz\nwsaWHG3fy7xz2JS9yyMYUEUkLKSYAgoiB646dUMREIP8YsRdAMUZwNoIOJfD\nSpC/ugaCiTipSrSshZj0VRzDqBFLK+w39mShnO3cnqHxXhCQ770WjCedCWlY\nsT7dGa9NNg5eDuKnxDvFYtrW7VmKZqk4yf4z3zpd92dZ0pL8NuLCqMNmxkkL\nGapKVc7MAwUS85BKDxJqgo7eByypebRK+GSxWS7Zjcm6aWYfjBid8Do57rV3\n+jP3/1dF8mFwwYadvtftha7vIekQpBHT8SC8GfyuMWEQmQIDVxKOcCozfKqD\nPeHZjEzJfG9fGFO6VuFsw5jQm27yZi+EsZjGA0ObOdY1CUi8t0R/YefVO/ZU\nQE38gwFUQuP8PH16bEOsZDGy3gylY8B6Dgk9EG1cVfttagSaTdEHsLyVNXSe\nH0aiXPCzuP5isg+zhgpI2X/OquJEOp/Puil5Tx6MSI9ZTdxqc5YkZyW6fIXM\ncKwQ\r\n=e7CK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJTpGHI9ys//ne/k0RdYlHyJWvrtZg4wi5Z5X9GEskzwIgJsO89zTUD1921yzYHv/HrGQ2cJmf/lHd9ptjxXjZdRk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.c89ecc63.0_1629134235168_0.18623606637599832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.59de86bd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","@material/slider":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Twp9Ca9mkZMpxQde3b/1lNVZm+5TSPEX2J3pr6or0ELiHpaR+WLozeaIwlLjUVI9QrFOdttmk9cojUx+FH7Nvg==","shasum":"e189eb3b00275aeb6e4fbd08ec16bbce46216e41","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.59de86bd.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGShCRA9TVsSAnZWagAA2sYP/j1jWfe7KfK9T9IZa5FC\n0xMuHhTG3LpwacLXz2TWI0mWws99U1S8GCgTXpBihToQM+GADs8YR+PEnFLh\nW+PpIyJx3ot8DTRlLc2IYB+TsovMLqagYrmUPJN0CpcCCpAdV1Bxee9EKKde\nuiwCZ12vV6U1tbJjOi9s8dnNPw06aScI7v4IKSKfF99PoCc+7axJA2pA1oo5\nrKRHMBCrHdNJ0+gS1Hrp4sODu1jGZB6zh3460J3dYP4Rih7uF3lyhmg0tRq/\nY8MMDYNTrV0Twp2TuBc/4hbSqGwW7npZZgTDU4YDpjdo15uNjv+qZCShC1nA\nVrOS+Vx/8l900mqB3p7ywMRg7bFy3E3BPCp1dAPrSfrFhcFCqVPm8QsBPdlh\nPDmZAiyf5jLWNrAH9OmCzZeO8UQpKSXFHouQEcCuPtn+26dSwGvaLErgqTj+\nBx/kublVlf8zcyOrpkRugZE9WEfqnp6KA3am1Rl97tSDmmN4Da+f7uSX2s+C\nHZ87nRVNv4Dv6UXOqoPhAzsBPmVGRxyfuQgFoA/MpcVOiUYDwdeamfCifGQ3\nRuRQapkY81UIDzaeha1HVfd3uL9VAYypbuN/IiT/RMh4YmBioDgoU0ijl3TF\nOTAvdlVGQVTjhLPoiBU+hiWBxI/3ZTUyTUcMEdqVr13ItLmNjx03VRk/m9Au\nHC26\r\n=PCc7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjjmhvhpBH1TLlfWzRTS4RGORVonGfLyi8yMMf68u2BAiEA1pwHVEDik75Cw9NceqUXsRM6B0vr2XvAxo5Tn0y7YZc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.59de86bd.0_1629250721209_0.10817162569641825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.dcda879b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","@material/slider":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J3c6doh2Je5+0nlwmBECRVl98CjjkMpR/et/Q4s0dnXWOZOW240pGthxQUyKxdgoPktQORziYp4NlObpNgqujQ==","shasum":"6a6ccdf8e17736f4ba23362d6332b643e680dcca","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.dcda879b.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhnCRA9TVsSAnZWagAAz2AP/A+FMa67vxiYtvIHlEGW\nZwNk03djVtz1jstwZgVRGXtS7KkzN5oAfJKWSus4cUFHgt48Vp1OuagFHJYS\nMOeXMa8gKZYzaZQTaFhXHkGaxS6FwnYYuLoJN4IetoErAePWJtpSrqIBEGKr\nLRfKr8c9Ha9xT9kR8dIR06VV53aZzMFdxsgGJlcQbqEzlZN49VjmQ/RPuXi1\nr44jULfgW4JwJruvQoPZszKE7eDtBNZycGQB8yBL8Z76DyTnZK8tomwNMb+m\n625nOMj6/PGsPyGnnB/l2bLqaBEtaznVAmXgHsat95DnxlbmP3T4EHGhzpHY\nz/pbNLn6BzF7nMQGQCrgJEn1GiD1gjxs2Mv/sY21YK91NhvwyN7Bbzp59/Py\nMW1nAgoJThGGMs8CdrL49C3KtFcxKPjhwgJVyuvl6KAfScVBJPaT9yaLykL+\nH/rbS7GaA3kKO7ndzlCbdV1dLl8BQrkfl9Kaj8npyRs1HcEMFcmlYhkoBdHZ\nbUBS++9Td8IFR1KcF5ssjszF4Vdwo6r18TH21fqz5Dg2zlTzw+XM9OBlWng5\nv0F2I5vGhgvbL4JWDl/wPpGm19txz3dsd+CZCihxCiXHpz3UTCwltJeYCcPu\nuH0UDXHx7VCm0D2siSXf+fpEVAi/nXRuDUFA3Lw0kCHdxzEqm6CEDRxhOFI6\n5Q2p\r\n=Hycq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9S8EzqZTvLKb1laceElTh7GcMiEUdAB8DJBXzI80kLAiEAtU27j11Cjf8msKt9ho8Z5i6aZ75EWc9Wf6qK6LUy6kA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.dcda879b.0_1629325415540_0.8643575486276347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.dbb8b366.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","@material/slider":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FDb0tT00lyHsu+BeDVLZv06PHoxeqkzGT+q2VfN80I5BTs3xQXKiWx0IvbAXErHiRWHedhFOH1RZmCA7XVXJtQ==","shasum":"ab714db22920f77f213f8e3c7a8b4e2aa2bca5a4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.dbb8b366.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKWCRA9TVsSAnZWagAAPwsP/3QzspeW+rB42YLn/P8k\nP8uY5vW975OekiqUv71mblvpUktkFPYUOfjlL2hYzgO84e/GRrBYNeUghBJD\nCPKU/0TkTxUJ3QP0rWZkfcL6Y78qWJ1kbtpsQnMM+QRaYWMineg3FQ7ShIz3\nPTEdB/AIJtVZvEQis5Mn5YDu8709S7+hoXbDE2jd8LbXvaycyOdEi7lD8Yox\nOYN8vTvsx151xcTqAOQlD+KRjtNxJwfbwPM7fHXykogZl0vK0sfaJ9gB1r0n\nnASkR3xXF51d4GeXWQoDIFy6AsSQW173+mrYPYfGVi/NVQg05yN5dclM/rMh\nyN11heJ0lAp7i9lm8oiIvddUfDIAEGRk5RrVmq/bh0nGY1l6lN9xIqpoO8vm\n6+6WH1o2L6ZT/cquD1Gi+bd3ygh46IHHJOrAiBCmfZMdMV+10m25ZyXT/EcE\nGh5aTZ6V1d6ReHyYd8a+m+m/ihySuZX9o/BM2QTbf1V9/Uy+TKgMahAnLOhc\nLaPcm0hJw+bodAWboSETRnutLxfBY66q4AJKWuJyUiF52Ct5jHnEQk9kOpw6\n/YGOh0do+BQfuO4tmaQ1vF0D9+SOLSks7nIF14xPoC7xetI9/Exs8nWQBofk\ne5equ6CtR7M6kLHyayuT2HLGoiDZchqoD7Fuo9x+Ga1mFTz60wmCoG7EClFJ\nOzrG\r\n=JEun\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiiaKEoLsX5gJYPUvHnZeTw2Rf2vcF6/ack46VARWBmAIhALi9mJtcHitvdfwHa9YFkGrRXM9cK4A1NTK4QWk76XrJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.dbb8b366.0_1629414038319_0.21874291465432805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.c6e3060c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","@material/slider":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0pC2EqVetqHorKTyH8Jf/diM02PL/ZWZ5uZ1GM2c8wGMbZjGE+rVbHsJ+CrYQMmCxeXRdPsgLH98D6X+GbC2hw==","shasum":"9b2f869b05a257ca0614c8d3186ed66b8b216c54","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.c6e3060c.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMFCRA9TVsSAnZWagAA3j4P/A8Iq4SooCBNyu1nDttr\n1MpR4OIt1xHTFsibYM8JnqIsqBhnx0QGjEW0+C9jIRBR+Afg6D7MKEhIdEDp\nbRXBEw6YlzTVPMYqskKOxiYjfbWy7vEnie7wCpkBdZKy9vV0IS6ONWjGtO2X\nZbTyjDYsgd+gMhnGl1tey5wYvTSeYg394cpA0gRmWqYkmwXI9ps0IlcwqTiO\nLqRMCIcvjmpeP/EouLLekbNshCS7B6q9GbIcHJuSs+5r+9GU2+2OMg8S1AKd\n2BHfojAKGc3AJZjBcNvTmfYPVEmN0MLHpEqqDrMg08xd09hKElhXyn1SLRIX\nG/nVM4oClQmZcgF8/tXdy+hbs6KXOOUT3S9evRUlKIduPOXh1kbeXvul6u8X\nLmzV6G77hi5veTK5ADy1mhGkl5qg8LIaRDWOOgBQkcUSZ5//kTSeiJXfFoX/\nMgJJbP7QeCbsdwOJWYzkV9KI2rMuQhyTZzJTUhdhjSBwscEjTtplP47/5g4A\ns1qJHq7Kw/OvUK4lGJJ6PngwwMTNEFkeLrnY3FOGIzvF7LBDOq8jJ5Nj/H/n\nPKXOzUrH8fOHqlfFw7MW+EYS+3v9DHF7f1uAGMadqFarbhuD3FbKdg8kOLuI\nkSWoBhnNOGbTk2e5YLmGOu7nPvLAHcD84mj713axFutgRXuFjbX+T0dyT8qh\nY0EZ\r\n=NLfc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxQ70CSXJZxTCEYPYoBHv4M9XT4wbj9u0hPvwazdhU3AiEA4hxztbpO7Zo3xSIRqli3iuqp7xF6IHFqBEfXwRghfOA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.c6e3060c.0_1629414149298_0.7463107054426843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.03120b7d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","@material/slider":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fRQfWA424C8aNAyJeh8XpsvxaitS982vTFFt/8GCfiJsOa2GiUnbKjdt7T8bcU/rjpzSjm8Tkn7KjBJ3JrQF3w==","shasum":"728efbda4f87ce4e35a9418622de90615c8b2bda","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.03120b7d.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvb5CRA9TVsSAnZWagAAqbAQAJgn3yE/hX6CY3oTk9R2\nQ+cDLllAF5kmYxbf31wmPKXxEcKhBX2cQ3JiE63xOj9gJypCUjOVPRtW/RsH\nIn4tHAqeyjdusY1l0HvU2MMtVPXaUXy3LWO88fWGJTQD1Fg4fCdj6n+EnyeE\nUOdlLUoJTk0a1uLcXTAFZfIgP1ansg0j772ImNohPFyxxZo/l0h0CQp4TXJa\nvDWj0HIeMmAc9/H73ggxlixJUhd7MM0P3GxA23ECDN/8pYJDD694RbcQH2St\nFAE9en1ySLKRfAbIy9iKXkN4a5r+oy8uLmVZ0gPLItGD4QEJ1lMuVEF6+nZk\nsxKg2KKiVGi51yZVwrvVCC669+NfQytVSAGyEEDoNfnuFtpLDOYS6pjvfRHR\nmKo7FpRjFy26DzacxX3Hs8Fg/+GcrtjGsad+q2s9aJLqlbLPUCbI5NPALWEw\nQUqewQSNBMNdRdfmUpDyFjJm+TnxD5FjqcU3I1A/oGQs3yK10zDJT7eoa2s8\nzjca6EJJY0u2a9I/VcbDjJ/qlbj5AXWY7r+ANNYBMP9aKfNj2I4/28aliAUV\nee9xBUA1I4c2ajIkaUoYMpr8T4pLrMRSSOJVWXxzF1Q2YlmzUbsWx0dHZNXz\nbNG2R1Mh9ue21mUH/Y+IKOyCn/oLrbHpFNhSa5g4xs2tD/cfyYAXsjc65CwK\nhabl\r\n=K1hf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHA0fam07kaaOv3C+qSCtnWHiMawpUY7Po8v6HLkQfRIAiAiF4exJQzdGDrhDbOV2US1x13xIYl/bAxSK3Ixlmw85w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.03120b7d.0_1629419257187_0.2309574058896655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.d75a5f74.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","@material/slider":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2opL14kBmAcg/WGf22D9YsIejn1X7pPmY8jM6r6LRQFpQpDGfUfcg0UWJhRcSUV75Sgny+QoGMjQuq2gGp0qIw==","shasum":"417cffcce8ecf72dcdfcb247d2dfb35ea6781965","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.d75a5f74.0.tgz","fileCount":26,"unpackedSize":163271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2A4CRA9TVsSAnZWagAAM1oP/2SGbIQYxNYO4o5hXvRs\nk1VAmgIaDDCRgA3cp0csMQSiV/qxuBVDCqmpCAu0r39tJhoZ23FK7Tcf88fK\n1+pEBxmpDdG7g2lS1GhMSuBGNSWhgMsMYZVO8/qlhJp5IlrOVH/BKtDFXPWp\n6sl7tm4NMWNxapqLvgMACOydvdPNGd8CE3pvVnxqgavfRt5dwPnMRqwv84iN\nZCPq2DS70XIsXR4iLl7/+r6iSse8rDs8oH0UWFbCbnNEPg0uMSRDDjQP6YBN\naTJL7sbb3oEcSfRoEw0dULo4Aiz/G0b9vv6IMPOkRFh22PRy/SzmLAbrOOx6\nohEYXeKVocia1f8prlPwisiycSZzskj1t3j19ck+Klp4/a+nK2VUXNHeRGWm\noQzWk8SMru14J78mvgyOJnD77yO8NpSvBEc7VmNeBHTCBvNg/RLI6u895HXf\nLnZ8I66hwXvVjJ14b0Lnm2cAl64172nofDZSBOeQCgXiqEJEhdnEWbHlJqv3\nrYhTCfcOPYKWFW9h2XgTjBYk8RsEpTTXUMnDp6L3jjQ9bC0/QLK6KBkelGtU\ntqfeFb1wRfFwk5rjzWEhyU9fRxO+7I2dJI72/FqS+ArQdlCY9JlQi636xIRc\nM19njTXeKAs3ma31ao/5oJ8tp2vRYmruNqnkJHBQoDbFRfSDZnbEUHfRgJZa\ngAql\r\n=4+0Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWkQ0wx2ea6EzRbCcbPaKFGZQYvqDvjoSmmf6P8WuFRAiEAruofmxsThnfNACSvJLN+pnX8aDOMAlMlgCSTom+eRxs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.d75a5f74.0_1629446200827_0.8510470264793479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","@material/slider":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ubdI+zA3iLdlYdkNqVR712H5V8YZERGeLPnKhmFNspuyC7ogSPQBvjP868P0V9/+UHwJRN0VuwwZMNSXA9Kg8w==","shasum":"5878ab3e2199ee4319661eca2eeb8e2b89c99376","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.3d79ffe7.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SrCRA9TVsSAnZWagAAZwwP/16zZgaCT0ZTkA0YQr9O\nxfSlz2wKvu1b+NmO2Wlrk2zGG1YznA02C/2BTFxxNmClMEu1tAqw8xy9w7Ce\nkoiJBi/3kytKsLCDolJQ9n4dZh+lE8MYaztHRh/YfuyZVTw5dr2WSx8rXl/6\npiuOykipXJRWwII8Ya7krHnXkMbWqoSotQ2RI7644AMyRZRXk4GTx9pQmGy6\niLf8+WEEZoZB6Zrd0wM/JAT/aTRpE2tXhtj2z79Iu9nKFukAFyRW9xsuwYnm\n+O+rhl0Z1zGLlG37LF6SY+B8XIU8xktfdswxio4YJvGtwnja2+A6WxzG1dQK\nor10HJhNEFkp4B2Guw4M2VPGLV4b3zBsCGnX7zuRSovzhC4YSdlCOCCGxLBP\nZsobopxIZbkHAGJVsKoJ8olTaywgXl/ROsXubEc6ANH/q2O76Lt2YoU3BSIz\nMz3TsP9owFrECdh32Y9fXEdB7Ae+yiGG9+WLmeEIpJPjZtfifYeO+iocVxHb\nnkrgXEUCi1DNrqdGfdgAc/X7qpZWp1UEfepQSIVfzmjyr1JLL/stVcZeoeod\nhOZSNu6wh33jpMxHQ/x3xayPSl5NTsA3OMRWBHpP5FrjdEv0N8mW+AsrsepN\n1Rnp51xHdDFuX9E47J8GIrE6FCIe5pVcVdXnUFWYmlyijAbINbVtGJi5iZjS\n2xWV\r\n=pjqX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtHmYet6ISlGkpdWv9LktbGye3Sk1oFOzAicKLIY+xtAiBLpyyzlO8n0pquEBjwPplyQ7g5ytef53lXb5zCtUYVqA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.3d79ffe7.0_1629480107411_0.056113576192028614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.02213ebe.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","@material/slider":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-axhJ9G8qAjWnaeqIG0pcr6SyuSZbV4jO/2WTvVmiNkwcaLMoD6tF997gcUZlkrGe4XYQYlaTSBCvPmg8JTPhQw==","shasum":"d8029189af18439be3afe124e85d634d601c5fa6","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.02213ebe.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XICRA9TVsSAnZWagAACr4P/i9grgJMjFWXnQohu4Ad\nlrlz5wJ+rv2NqA++p5uc5if6DA1V/aeutoZPFtMtI8S5zSwcnE0EQBg8ufpz\nsYSQhKH5JEIZem9yBxAYRQQa+6owxu91ILlhavXl0GTBhrABlVAbSWj0XE/8\nY8z6gRy6K12eNm4E6Pq9Iv9a2Lo5LEe3wntkouYRhedYf2/I8tkBzilX1XPg\na4NqG+DYePDbh9EZvnYWveCviE/wrZ2wAkV5gFw4ZzwN/C1X6TW8c2t3gvNX\nbeTyzbPiZCmV7hWK10TdRZoEfqwOMqo9uiZGDI4tRCPy9rmnFjB1KA9Fbmw1\n8rreooswqs+fSufXt7t3OyxGK+1CJk1yyF624+/9B5mDYZkMdRPLJ42T1UZ5\nutr5E48BkWTzLkM21DXDM8/gSpxG1itTPvNf1ut6DDrQOMy3ejOUYl0v4uhz\nYvvIj17t77K7JkBTdeSxIW1t4DAECoPQtqFUkiyht+s/ZSLLkk3+pY/lRX5j\nw5HhJ4uQ//nr61PzvwDmbOcv76Tp6pJMWkcIvPJJePL/cKpUIg769+4sIhoD\nkjCB3kUF9jMqTDZ8PBUNqbx8ciJc654Zc+TmS/FgM03CoTDGYbY4g6++hpe0\nWKzfOjBnLS022TwafPHaU6RfuNebtgtU9h5R0IsbJS+tfOm1J4kw0iCf+A0E\n+Img\r\n=rBtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaPei8DRfGcKbSLJn5zbzE0eSmEJNlu3ERvsj3lfxf0AiBVAmEzcg+62Wz0xDgTADbQSWr47siHxFLMwJ5Xgv18Fw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.02213ebe.0_1629480392795_0.3515887025167834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.90a999b9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","@material/slider":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t2fZyGIUZIR+QYivPjwyjeuOGAhpqIVfbiUEdGLZ0+jmnLGtxJkARRuLqv5zoGZv6J1e95+ieFhdaHaAMrC86g==","shasum":"29a52a69792517968dfcf22c3b97ca713b90fa48","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.90a999b9.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/ewCRA9TVsSAnZWagAAEtwP/iUe6oJR5rk8EFdNa1i7\nDzlNCXSk/R6g1TMmbJLOm0RWNSvIPZc5fjtyY9GDv1LBMuTFphQj6nKWPfBQ\nZveBKc3URRyo8j7fBmPopJEKYnzyFbU5pLO5qb7xWEWGZC7siaUT8t4OZdd3\nSnSt7oBNBuKuj71ACvmhv4bMWO6Ffn8rmBWoNKe1ymvRYE7NP+Ig33VzNDNX\nY9Q3XIZTLUIBcD4eTYNENqvHGGY1vE8fEqTjj7XtlZVa89XH8VGdij5rCMse\ngp6F7cPjK7iJ1BnPLK1oR+HHW0f6O8SKW7VKbnsX5p0GtaMa5pTpaPCrRuBQ\ntsxV8LaIG/ckbVwISbLgbIVLEq0Yak0CyY7fL/5WfRBV8e61QCy7NYFAGxZF\nulX554EdkON8abmZF5ylUDda2XH9feCi/+yWTNMCfhn1rz86m966gDxb0xTb\npbgr1OY7qT+x5/48ZLZPRn83WW+4dISsxPBWwoQPzfHVCykIWNz96Q788AeX\n1akvOVCaqPevqoKl+7Z4Eo6hzygdUd443BeFoJYBDF8CJXn0GLSwbEckNOES\nobyRxuLLJPkUc/kNmjF3dEJD0A1I+E0sAWSxc9HjORfv5RLx4mtVAq0/3Qsd\nEL/WRT3QymuiCNf7GgOU7LVJXdw4OsZ9mjHf/jrFkIwE1/pDcegT6DXqKKBw\nbjCZ\r\n=mc5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1fAVUFlmFQ5g9HG3aXECojRRtj5gSFPJlu3ik1daVhAIgBH94ceDvYntvyLfXjh8zj4emNAY8XbbVK6mUvljPoHk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.90a999b9.0_1629484976053_0.7902093962238737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.6db58716.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","@material/slider":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X6UqVxGjfHgyNU68SR1PlQ5L+NZtxOHdMsavhejpreCBsInRRTgA4LvdZlHMGjYRiXFxApx9mk4wWFBdIStfxw==","shasum":"f00134c12a72c4a42f8cb4d00b109511a632174a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.6db58716.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WECRA9TVsSAnZWagAAfEoP/Amco8uNfZ2Kzxsj0EA7\nMPTNbZyxaHJkpxw5kX/vcjS4/87R/UGwntW+yXbYmu0QHBXOBag466Anwot6\nGgrvNFt8yvCaGaX3YdrCdofmbm3ybuzzYcXyq69+VNgw1Z8EJnylmMfmoHlg\nfqbFmwV95+vojERC6yYU7UtlCid2sAzlWXRhJWyEcsnrMImqI8DcDNn7t3dW\nciP3iNXG0rYHA6mcPXIz5SBOJq3xzxDvnlqmyQAuxU6t1yMwrVT7EQ0jlFtT\n1ikYpyWdQhwVpSAwgaMPZX8AMFjiP4RkUoBxHKxGaaFnMGDsCW1PZNgOMBFO\n5iBKilZDrnKgoma1YYOJwjqVoBh4PPsdJc2xr1kfl3OmJh5FyRI6GgHa9tve\nDB0xrl64NKjdBcXYqbF40Vm8Uvl6THKVD9lbnE+Ha4F8CkX3tBE+Zqn07ui9\nzrXC5Li2LDeMU/ny21EE8jbQF19m81LyJOpqwOG/eRzOVk9887wxd+QJsW1n\n12rmygojXD8OHZtc8QO4YFiVAIRtVFSWujoQzi9wi74luUzOEruQM0zwc3Jp\niz+HGyXWu+MSQV+9bNtYvwWjHIQABvNWGIgxdRWZJ+sKob/btfutRVZBNFaA\nP0II3T+dmKsFwMues3a8N359gni1SXoGd50z/Y/vHJqKnsI0Qqdr2cLWCvAQ\nNjGn\r\n=RIYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIrM974VbQB622bPBMOgAb993WXKTNvaSmFLqaf47DJwIhAPLOZZ1OIA0zRTgPv7jiNvzvwS+UaGDslNx3I+ITBf64"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.6db58716.0_1629709699959_0.055119364641828206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","@material/slider":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SIoFsPhyLHiuubaQlE2E2UdSxHfx+sPhqXHfeEAAEqYY3oA/K631Ay8KXu8oi3JPel8OT6jydiProXXqbV2rDw==","shasum":"2d847f21100dc0f4a8fe40774522c31df5f06cc1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.9fb5bc35.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCY8CRA9TVsSAnZWagAA+ZQP/RHMjAx+d+LFAmn1XFuu\na9zQX7kmc6UQYp5n3uOKzaTkXZHx45qZRL6NM11mQbMAI0ARaX/e0KtYLP6l\nL5/s/zfBhfzFB2LOYsJNU/4kCYAWUbtntxyOjIQPqWeFKn65kWVyUAfMDfpo\n/0onrINPg47ND0dAXzDji4rDiXnrItYOkUKo594nRIjV/CfjL0GjMMODc6IH\nP5hWBR9RMbYy3cb938V+5G75Dr3kj/2tumH4d/8F7/6D6NhW7kSOP5enLdiK\n1CKSHA6uNN1wDdQFEt1DPEUiMdBR8ybeHZ99IcBmKstGHbhGvt/1oWyPpR7B\nThtSKFeaB94pf+X1/S5XHjAuhzSGLBTsDI0LXpgKcBREIX3Z47oSazfa8rAJ\nfxvK7gHaFqx1szwXOWIIrFX5sDBX0hrFBKBzRjdVm/tmXYxQqy0cp7xf603F\nL3R/1Sl9SlaTMtJKfkZEYqiaJuysxiVlj/eMGedd6An3yDIuhnf5bqNa+Wqy\nMrDkzVh/o9+SnGi0lJvw8rptVp5AD7Hc1T1XqqW1500Fo2xAnrUt8rp+iDSL\nLmvHFXVmlMUKt30Q8gmevxyplE9Jv2XCf1iPEpLVjylgkSb6nFMNb8f2UvP9\nApJtSRWHljaYADbj6FZ6CzilMFYcDK/hCjYvOc90DZBamCsAvU+nZTy2ly/a\nOReI\r\n=JmMB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtBEuHER8ud4QqgW+NMfp42Js8Ji80o/6PBGXu6CckiAIhAIe31+v2QGH+yOEVCFt+4EZNSOsh+a8oIC6ppMnby8Wl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.9fb5bc35.0_1629759036820_0.5962858443180317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y+d23cYamNygiDZA4i93rijUFEC5SoaGQzrNAqOgpp/ykhnt0WUu7NqR6whiLkf9gCGZZ5y5yB9eNHoWdR1Qzg==","shasum":"c877155842b66561452d7bdb58d3e51378413051","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9iCRA9TVsSAnZWagAAucwP/1+NEk1LMPwSGUl9TsId\ntsPmXTSgwKIrEq1xkq6U2757dGXrsOvAR4fq13jU22pWnz9t6KSHlgShugrm\nbEXOYLchs70Tfr9FMmJCrNeQ1FtFHGzAbCa99hdi+C36ijchaThi7iQJQKw9\n8OV/m2g9jJyxJqiWuFg8ty6FkCqh4ej8t+C/HZWbfAYtiSLnc5Xf+uWnpTFI\nvbrgNCd+U8Alec8nsj+yppooGq1CZoXo6mjNEYE9/5KChD0cYHuzv+CIVypC\nvzCiL7l4s8TM0FWQLb+IsRKLm1FJA32tqyN8bPpTnKDOusDiEjwb/kXlO/HI\n4S4ap75IsTZtNXAmEOBWMjLCiQbDYEUxytpQjRWjClylWb1EoeHmC+u7SKtz\nGYZAkePPiiT89jVYvW5k+/lU+TGPUodLJ9wlHYE7JAvoS43TZGPwTVE1VZ1P\naOSblgbLXEBpZC80ydkKa9B/a3Ne+r4Z1ZIVBy8iJWu6gEuHlmMdVI052mzg\nAhXxKTfNJTo8ER1d/JReuwUU56/wSwmI9yKLy/ao9Iq/ETsA20Q1hxjVl6RJ\n/1D/MtUGCjpEAfG2tl9K4W4zKbvDBFj7XGf5okmt0w5DrnolMHZNRbJFGUBK\np9wXbzE21pXGI5p6px0tJZshBHsuknZwyVRMVFF7Q/S3eYlRN2Xt8I+KjmSK\nr/GT\r\n=ushR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQeGmGsX21bLERFepdVdpHWTEXskdQo99dKRr9sFrYZQIhAOtiEF916UUFERYyB66HqAGncxAMnUZ8WI7eRCjF22Ll"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.ddaa5d8e.0_1629831009985_0.9152184666379453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.756208fb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HrhlzLnuH55RG3QZTcCusUs9hoNZSUOD00BXAM/tY5rv9w7slHsb15ZlW0/A7Z9gAAeEopCVh36dUq7m6D5nHw==","shasum":"2111f93848058feeb2fcd1a8161fd31356429df3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.756208fb.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8sCRA9TVsSAnZWagAAPGUP/iMXeXRiQFLzNNCQXPuL\nkA3rg80qwyt0rOcuD3XYJFvgZ+6t/jwyHE57vOWq9BWhmnz3h673cASLdDsp\nUrmVfr7IwFZtKw20ueKa51URrYOBz4rEFG0+9WqXCWdWRgxFG/9oPKU3dWd9\nGAhI9O1OSsoWt0bXEtrNC9MdD2L4ISVg6REVUT7e0KxyjHjPdMC59crz4bsK\nrGTzsz9KJJEYJdPoL9r2Cu84YOsv5XFqjx8BRKANiGwWEYekcZ37srdIt5gm\nXfOvNJTFEm/J6vZDVBVR/uX+hFyZ2ICnKplO2urmVcbBx3FgjLJe1K36Tulg\njT9mGFZelhM+Ta6uovgjvsJB6w5NeQ1BfOW1YuMBKA4SQJUxjchVjf6kb1DQ\n8ZapFtuMYB/AYnAjdVz7glATUQ0MZp8jRpwgnEORLGthdyazduj9rOGfFKVQ\nATVjtHNdWiB30ZCgenTxtCP/oXtoESXQPMvRtuNimVbDdSBHPWkmDH466zeK\nTGZv61+VFOBOwIMdJUeLbv04nNluzGw/RHcoVlvPflg10yx94rq9X3Egjt7P\nViLZHO4Bo6cm8xj8Xc+IwuZwz69mpwDhwYYaslCXZjypa+hUj+aBmG3ThxAy\nIHnp76tR2xbTGbCZXwVuU0NOpA+pjoi6cKxZr8fG5jm5mxik2W4fTod6zf5G\nmFIQ\r\n=tWKv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGinOnrkxr8xms2aBv49+UadIUBYz0Eqswvl4AvyJc+dAiAvcJDzavIncL1h4FrKclnD39uerOH4iNVCwRm17RSXew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.756208fb.0_1629921068114_0.12889925821894632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.9576dcd9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZRbC/Krrp2MKLIInMSxU/nRps1T3ZxNaItCQw4QGTP7PdRJuk8Nhh2bn6XnnrOqGx3ys5cEatFDuPmNT4DaqKg==","shasum":"323fcf26528855d3ed9c71f929ff818c39ba93d5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.9576dcd9.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmwCRA9TVsSAnZWagAAgG8P/3BZhpVtJJv2zlVv/9rV\nZpf+eYTboIxesm4mQFMvAYzLRCntfHaHjdgYhWA7Trd5gjXORZTNlyXFj6ZK\n3mvIY9YYqvzQALec+gBVw/8CPFO0FU558+8aFMSD1d/lcC9FyzdBMY1zWeT8\n8Vas4jhpAdAoFIS/BMvtXJFSyQ0qoqf63+LBNsFHvIrZ1hqoSzvOOF/H7AN9\nm47fL/AMfGS4cF/xjEkL+zIJRJaLeSfUOpQt5PNJpXjse9EAW4jHUMZib11b\nIGvAnJaPJkjf8jLL33CTcPQTF6i6AOdaW9E6qqvdybM2BUcRzuF6Xp+IKMPY\noV8GyQXlxkWUNyO3pIQ+9Bk9YZuD+w9zva1447jtRivVKSJa0k9QZzHKINQG\n94VAdcap551tJ7ivNVFqAWoHaOwmesWSf4Ft7eXr3SBAYwVX9aW2E5XNa63j\nvHVu+e01a+T9zXBbpWvQ8cJreFsP1u4PtnyTCux+pFEf6NpM+6fJBOoHILAm\nrrQeO4whMfyszlulkRKg+AG7IitS50vJatTtVhlupjlxBiWvf0cWq+UieTqK\ncRGvP/tWQj32T9DYM4EZxN9KoKxKyqbFvM2/T7dT8OjZn6dpGe8gAEP1+Gyu\nxgF7/0VxOb/kUT4eTRZb+/gH7WeGkJY9zVIvpwWZXgI4zJHzDiyppwZHArMP\nvuPC\r\n=uzI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCokotN4OIge0g3I+JcJQlhBxIct4vH1hYj6q3Xt+1i5gIhAL8zJSkAKjnsNu0y/dXVWFjSahSLaTKjLdp25jqXDThx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.9576dcd9.0_1629927856698_0.6685045730718242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.7531cf97.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7PaoiaPtXwZPgy95UXlSqJaXyV2++pQiB6qEgy9W+n0AgWi3adQmVBK3D8tKFtyEv+5N8537kVL3yX4L8DGqMw==","shasum":"699655b9ad95a22c81d0326eb6bc7224ef777908","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.7531cf97.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87HCRA9TVsSAnZWagAAg7QQAJkm2GH38ENtM9yJQYKh\n+GWAsK01CfUnN05pWhADMnbyot/qXI6GE8Vi0r5G41cspsYu7pAEAl805Izt\ndW8sVYVikNpRZgIUfx2qixhIpuwmw+BQz33jPCr2+7EMdxb6gHK713RKhbr2\nc31Z6wy+eWIoKP33B30S1d76liB33crg+PE9mX/rRQ64zX552ektZ4lZ+++8\ni8xlqQTZg3eXn96y0LXsaEiLTJ0abnNnNdknsa6411LKK+NYncXeLf4H3Xbd\nUn57WMWz/3S5+F46jCvxLYY06h+8KIF9dhxCGPAL2PRBJajgQ8hbjNTZmOs6\nAQVGLFmr3+KWm6VF0bDk9BJVtmicRUKFziSolDeGV5o/XO4KQtP7EfpnXSoi\nPuqBArlb0q/iymXnLxk3lYMdnMTjhhCMBaArsl0Fko/5Hr/T+vqbHUVkfSoC\n7d/GgNR3gHBXLDY13T+aDav1Js01rQ+d40cEaHsZPuTxeJbjKWwZoy9qewsG\n0I3E4VLzbRbNDFdOL1D5aaIcRZl7Otu1avljRgwsR7KYFA9lrz5iOQeIRTkM\nozSw58KtTQym72ft9CJb8WgLyi1XOCbZX0MQtqQbVx3gdXztHaTRARzwY8yt\nDxMTh0xxdRW8ob893mRoVt4Z7yP6D5/27URxxhHz8s0T66ILvf3ITW0clfwJ\nH1rP\r\n=dlpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+q1IyNJpgUYdbSBww//c9cmt/8yqfIn0M/ssSpEVjdQIhAKVN/UQ7OEj/P92c6ijPF2uz1buBFL7iK16hzZDEoYqt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.7531cf97.0_1629998791667_0.9495615414841807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.3bab26b4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fvxMoM0Ktg33XHuVG3nl2M9lmJdchxpQ2K3NT3oJFRWtlnvzLfl2gZOTpYJAnBrnDRn4ODpoBJBd2AAzYg4zrQ==","shasum":"5c07a7bca0f67fe830cd650ff0fabcb96343289b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.3bab26b4.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtmCRA9TVsSAnZWagAAZxUP/1TshNoaVXMwz4SrbOII\nfeGqay3nPX2AV5NwoPxpHDjxt5aKim0Od/51azC3jCnQI49qdEbKHkwNJpCV\nDTWsVH+6BbUyzhY5TqHFW98tSpbAsnKHUKIjQb0+f+23+VQPK40/qex+FF/Y\nP5DM5m5ExRgqyLdfXU2i8SXwWKTlWTyQf8/oKYpox0iyjpvjdmbfyP7DmBMJ\n7hNuHq1kBKNzpbrU2Kaq+82SStDk3lv581LYIYHrsNnZUo7Q1cIzrjIwobuZ\n58nhxnKrB9ZaWIEFDoPfMXSCL4LYw0XeFFGHD+cpsDbtQlN1N5QW7tg3MkZZ\nXrV/2pNLTYMDL1XP8MpNPfgcj120hIKU5ucieJ+XYpmvoaoyajJfdjcCCHbL\n8IOMa5U1S4L6o9SyPSo7jr+zzwBAAAHLME2L/yHzx8PKMCNLUz5aJ8plgp7E\nl9LsjhKl4NPRme/PaDjBk8HtWnSWHQY2ULNMR6HQKRE3wYCMZw1SY8AYCX17\nAdLupqqxnEZsVm2AeT66u9nB9nezYqg28VrIFsnvfhEmjA27KVG7E4GI/qFY\nzHAYAB0eO01oIf827ojFXL9evg/5wpC3ogDM79qiWGhcYEwnsZNHDgGT1O2O\nUFpqLlpJjzXidH3cGBhqwPHgdx6oao6TziDzdRUHvI/IP+UzXhdWFE42WYC2\nqiM7\r\n=fTeN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICue7+6tKlpULPNK60nkKqD0Pun2VuByENLsol95aDE2AiA0P3mNeVj9Zl7wx16z/AG+n2O8y6RC/EWa7XbRsAbUFQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.3bab26b4.0_1630014310117_0.9952097680523897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.fab48bee.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yWgnM5LSUtMYfwWSrzhO4sXz+i8tjEIS1a2eVrqGgYOoU+oOBY8/dsNxbTS1hGaQSh2PZ/cuG+182s++mEktyA==","shasum":"ae8afc6bc978811d56c9d8c412d9b304b96ad5b2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.fab48bee.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDACRA9TVsSAnZWagAAZugQAKMl5tMSIMutiB1SoGKA\nzu3Gm8ZwEUspaAG1k3beB2HfiNJmXn2+AvP313h/B0gNJuOHLcxGyk59j1db\n5ZfoBsLs0j11Dh/T5S41vAnxWnZSnnjvpUgdnCTGd+JKtfIWo87jtvdhsRLt\nO5wMUpqqkpdLmPp0d4GgD8uaofoN9NYQxdqpf7kO8090w6hjd2RwHJz62+/c\nfqzvJszWIk+xE6aFivhasXX8/HQPO3hiY8JtPZLQsFgNPHOUfBlSc+bQ+7zB\n2cHZO5A1OO9FeCTmuZpdi+6PWK03sp00zj8fPxCGUeErrI36ZG72IPQJpjd+\n3HHrz01RZc48B7nC94s2hrovvpRA5FHqNi1C7saDy89tOgHvRqYupSib1t5j\nbjsDp+Jj+UZY1VSIZkauOR7CPUNFMLDeoyoeGJFqh3wjjx39h0/RDqbmy0bI\ngLUclbH4FVdLIUXfhZEPXTCToe9QYPllOZOjljOyyXvqy/Y3R1YiRUqaaC9P\nu25tttGia6B/XSVxrAo74LDEvc7OmnwAr3bKkFaLR4N3eKOxEx/AOXms75nv\nTItpQoKc+WM2R4aCQXRHKwStBZiV87sP+WkpNMMbIEUPemM1l86FodpiWLFV\n40ARKCo6EqMkzNFWZKlinrc3/z1nxxaK8PDuKznHGbTCmOZPP76pkM+pg+Ui\noSAj\r\n=JSsB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICjy5PBEPHzF2FzU97x65pmR3wLZn3cumsr4rk7z45RFAiEA/kvFbkfd+ipdalscpoVlAaWOOmkx6xE+E/glW0KFmtw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.fab48bee.0_1630015680631_0.510164607292164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.dec18df7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YqYpIJaNr+ozSXuNqI3UPjEnhUL79Gm0q2r0vqJkfw4CBL77xjWjMKcRaoIoUmA9bAjRcMdArnpWkd3EuDNfAQ==","shasum":"a4f005dcc15d6bcb04f084eedb8933817c6e315e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.dec18df7.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbdCRA9TVsSAnZWagAAbwIQAI832+g0Z3YgYEbBf6Y7\nTvgJ/tSm/lShi2numbusLqD2vqwnUeZ0H/+R5o6tQ91ooOS//xBrQO0vGPjw\ngw8b74wK+EurleIHpacG50PHE/zVIjr4xuCKDdsRFQCrZJVVRSlOsO5Ch0yS\nRekqwHw+drH1zxZ9H9Pdrd8b2czQhrCQ5dmbwHMFYcJcd8k4kskDZ77R7nw2\nHIjkx7QiblG9Udd9bVTeG91W11CxiYrXA7Cet+9ICz0qBMzgyG/zR9H4eXXo\nGou6zZZjPzx/Vsreg4u+dgk/9kzZwy1EtWT3fdPZN54dgbP8ZwH/7RKvIeE3\n4k4i/s42IRUn12a+koKAEwsgpsnbHTlHiz4JGr0qLveVf3Pc99pQvFMO32nJ\nG3BKPM3Yalfhnz8bGlaAa1XttUlBE2wxfq17O/uaiKaoA+pZoHYedhgDExLw\npaMN3M+OSYWkeDku+svK4Eo+85lMuNEKA/8rwiSnzWsQzlZW2hl+NeHGiavB\nqSemKKYPM4xBofWbAy9GTRZpIqxD5x0M0gQ1iHvNWay6MXtbIKirvGLm9u0S\nDDqeuYbLtG3zwlDnP7Ox+bf0HBwPvLLxx8gfDrLzmfC7gWdfDKek3uwFYNH7\n/A+1KbYdM45fJM9TJc8EIOZXA3jdRwWDpfSkgIKkt9O4pg582x9nQ2D3pN0Y\ndYmO\r\n=ONP5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFZOTRvOM9YJbJ6WT1wM/zFV16UcxNnfzrRiGEWUo+TQIgYGrsQoHvLdgibOTknc10Re3ODHJdAhBQPbPVGR1qiEw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.dec18df7.0_1630312156962_0.3074812018327129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.61fe5b17.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fJyX7/0MyE2sz3hyfzQCfVzD+Ig133qfFC6cazZeUcY6yVepZ/Nr7VvMfHKtmJDVEk1CjhW7JkOiVEnxr9sl+w==","shasum":"b9d5fbcfbcbb456df1d503139312eb767daa7452","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.61fe5b17.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTF+CRA9TVsSAnZWagAAtv8P/izw7WA3O3kJhc4asTHR\nm0chYbsNtTx/1x1aB8XF7CulYdbu3CqZsuPBlp7Q9rj3FPBWLEzhm0iFLo06\nZvFD0Nx6wz5XG+cpBZ/F/Vn8/34rduMFLEu4ploSyXCEv8mhB8zXILM1WTTG\n5nBy3N62emDsHTqW0f8IiRNNJb4G6WErY5bPDUV3s7sFTQv80ijbrrHPsSdJ\nfjJ/UWXGG14PyJ5RLCgnyeq3s3Po9HWKjThr/Ygv9tD9udylHM+g/KCISCP5\n50iDdYPavXtodc7iRApuPQblTqsOkBWqi7OCcfSMhM5l08znqmJq4YU5ji/E\ntzSaqDmMsJy7APzzDxyMm/xRtX+n2rSkE3sCuTHOO6q2cXqFyltXW3is3Zd0\nwc9SPMLu+6GSYEgkyJ26/zJ/MCnFKLBrXVtaJwm/uIAi5IZktkqu9zkgL8/U\nlviN+6HeA+DfAmCw+OWkqro84/BawKLE8u9QsRbfTOGKwxFzVownGU+TAIYp\nj9fSfZdTIaUl2tp4nYBt9VFpyLQjOJ99C65VW/nqiuWqPKuv/ludf51P05aw\nYyjL8UfpIvR7Jx8Dl70XCZSj51UrVha0p2lfY/zJftkv7IkYOvW5VAUtZJd3\nW8leAKBBuf6k3R2zgY20pfc13CKmDGamUfIF1QI5RfYrleTz4jNNa6pH3Wbt\nSRKw\r\n=Z373\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaVwri/3ONO5rH/xP4Pqn1DD2/4mzMTGovZxAoPlsksAiBAeJolEY1j5jPtAGTVQqbXschXAnV3rpfDPJwnYM2P1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.61fe5b17.0_1630351742759_0.49299063767463824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.a8c31f54.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QFOxVxovAx4sHMrEjGKsIEBGuY+OdCGwijDiGkohojC9sq3sBKCSpoWT6Z+eXCaqi0ccUlAmKZEhwtMIDNAJdA==","shasum":"3bbce97aeb4e4045966e2199c7202b6e6a8f1e1a","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.a8c31f54.0.tgz","fileCount":26,"unpackedSize":163439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUA3CRA9TVsSAnZWagAALfAP/i4HUfCGbo0kuwCDgKTn\nwCv05dHsQDBrodwLwuCe6ggGBj+zv4iotWxW6YX+ty7j9j1qElWLceFCDE14\nBZ3KsBORKqFlGQ6jFccnf3eyCrLKGLrYZOKlOdfOx/BJd9lQ4ap6c1zpUdkf\nMRUm7XWDvy+s2vhLOilKHNbjhc3wrBVfqy6ELYUI4v7GsCHyRbFtWdZm8liI\nuNgw/UeVKB0TMQVGhQCw8VKNDQKMhfrjCA0KlOkXSZcOhtSJT9Yk0rS1yewY\no5KJ1DQ88vjiGZ5fPkuoG8xjZiJUrlMNW8hMh8FHKHOkgpmofwIRNe5eRb7o\nF2IETZ9bAsQL7XLGSZqqZOdOkjMYkl4dDUoefS+a0Di988r0nOZicgYgsgri\ntV28AYzZ6BEsyganSE/XAZLFYUtjBnKVMZe3uRDgAWKJh8P709S0OSG/YD+T\nQy3/+dQDeU7nlFrB0YWm/HPrZasXhDzsamiNnUPXgjbgyOn6KUffNo5E2aZI\nrc5ZFlrxWWRRfhE8Lvvaxw5P9JTUInzh7SD35KlySeA0giDiu++OkzOoDu+a\nFgN38vJ391Z41lMgzRIttmNlxDQifR75y9Y7WH4SN4N9o/+4T5a3FTmwdo10\nTHNllo7LBiyaBDH7DbejIB2u6wKoSQVVhNQuzpXcLh2tklIdWVMqd1BF5TpF\nRlHG\r\n=ieEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/ACvFvw5O6X0czGTe42p1i3sHJ8K2fur3iCyzQ+9CVQIhAIg0LOOYK5qgGkiNaPO6v/6ffA7hYKK0F+2quRGRT0zz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.a8c31f54.0_1630355511140_0.10158983439993596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.a096dba8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DHOAUqn4MdRToTtCknsWxsNulPyeOqaBkjhtPsp7HVFtL6cN9QI+brpTj+Nti4JyEGt1rQWorkjHQB+Nr9bd5w==","shasum":"67cce3ef99b5b2e3fef3c5e16a0e1e9d0f812a19","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.a096dba8.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrmCRA9TVsSAnZWagAAV9cP/3C8Flw1wfVZ7QYFAh8m\n7VpdvQA/TJHRb7gkZDvotBRxpRBBxZPlGtPd08szBV8xSFwzQyEjVXP/Bhrw\nBlG9cm/Um3Rin0J97PwLHzXmpksrkAXHz3Ev8IccR18rgsZl19neHYv0bOeW\nsJ05NS3WXmFu8j6wIitejUN970/IvI3rwC/h5Je3UK/qopWcuF4ZFeX478zr\ngYy2sZyvSd4xUO5ZJ2OMUggaD6TISHzgHsnToE8JO4aMRtr27YB9JQ+FN0aN\nmMA9I9iyZJFiY+dm6go6I7MiHgapI2Q/NSXmgdckLung0qsAfpVadWQ9PIVL\nbdlnAjtXuaQXR+IrgR8fxz9zogzYGbR0nItL9qqSiTAvzrmrWBRHppKZSYc1\nU7b6pmIq2P5Ll9pv02pqpCimVedptlfXPI0AmBh4CTxfLVKipmZFv/qTnvDj\n3EiuwLcmG2Q3O2TXA/KmVIPEYBKfuyG3755IBa8bMKOiJGAm3gXwq06Xks9W\neVUQELB1OsZfEFg4Zmj2Xf/F1c4/P40z2T9ITnkEf6EvfP+t8BzlkMofG/2T\nYipfc4HEC9d6hmHELAfUM5k6cWqUTIu8rlY8Q5DK+dT61LbSBB5Sfe0ETZOs\nAjs+mTzriThH6IMcsrMrfjLcnX8OvLTYIg9l4s3C/DyurpDMqnSMhwBbFHL+\nQaKU\r\n=5xEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAiI1rg5s39sIoGLTlC7x5Qi+4id+NX7Gi8Q74Rt630AiB65NEoyO/j6fZC4MWelGlB5iYRGYsiDsTg5Tw7+kwjDw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.a096dba8.0_1630448357818_0.8851560917084518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.7ec04d47.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3F+4lxT3yJhETRx/pBnw275velC4TexpTOKfKohpz/N4VUtZt5IT9CMY5K1tqqiQDvfFiYN1ZXDSWpxtgc1+8g==","shasum":"4e638da4026e55651270341ba89684c970e96039","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.7ec04d47.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV16CRA9TVsSAnZWagAAv2kP/2pJW1oTvzAzclBF1eDu\nnppOjzkERgqOulLcAMxNRoa4OHZBwCypgT3NU9jkl9In9y4om6qPqAX9G6cH\nXN16yxcoxTm+39aPlPfXwXYwDSkhemP+qTuvDooahYH74lISoN1kSvheUYJS\nSLM6AmGzccbdO4M96eoRl0WMZ+t286zJ53kIWWx/yyq8YaTTCn+oPgDrWtTh\nu7BNJWJ9wRhCOD4nEoZj+nB0wxn5JJtdruAmbo+6b6UMU2TjuV4xUllhMWBj\n7BOj1JvT9tuMVQqTGBR5gX/vY+SbDyNt1jsQGEVDKtDqAQgpSvX43D4AiiyI\noRgP8kavItuje+ustI0sF8nQGHO2FN8CAh4vnAR8hIDpMdiKRQJMWRH5HQ2H\nWyXQT1xo16OQ9M5MrrxH/O48w5Uuoabb9t1N/aG42LW5GoNlAD8X5KUDEctW\nD5VxHTxNRHqAwVccqaYs+f+5UrmxlZztdz2s6Se1eI8c2KPbhDTpYNa31RSM\nGELDoQ96e0h6bznWZy0mKxqaTO426AmV0BUc8nxQYPSe7RHoRvHLEm631kVV\nN1tpLxorvCDdQTg60m3iUeRhX/mp2SiTxYD3XylXoX27+mtxS0ulrN0D/aRU\naMvwIokaErGNPyR6ns/0Z3fvkpd8L60n7J7cGwl+fqSK2krUdTOfjuO+J/93\nJKtW\r\n=OAm9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKWXtjyT7moJAz06lr2CbbdvFfmG6BAo3CPsu5Zdc9lgIgBqQ+TW26gPNjXdgJC+2J2czgZQwuEdPyUUkCfpaMCCA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.7ec04d47.0_1630625146434_0.24283859889271175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.d00b098d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pyH+SQjp9VivsWYmMPgyLTnHlKBmMo+Yja30rBApDLs5Dn1ny74ywxF4x3x1TuDp4YkWPsHl3pAbPj2fE9/XoQ==","shasum":"8b566d80c918623dba0f142c646f0a713ea8b5f5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.d00b098d.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMkCRA9TVsSAnZWagAA7tkP/0sq0AQp0eeFHhq4eg8G\nIHDGyBJCr4LLcq9UvC+xej4pG23YKHr1+FUWQ2sv68Q6PkheB9q/xmqWofrk\nOURg4Ji3pyMDAjJy8LkWCQUPC9BFWRxnuv1aMKTQDYlU5QE49K3/LHxs00cR\nIwggCVXoxy55TFkl5aYhoYA/TaYb9E5U+IrXK6x8gKuUOk/D7TukwB2mLbN8\nSPj7WZ4kJmmaZ+XWHdL9F1FZpftaZnQhxFhz/s1jdMiaS1pAdxYXjbO7SLzH\nE8joCSdST4NXfIyWsS4X1Tv5WOObD247pRiQlSdB38WYYBL8LGv0FOo93GEn\nPiPCyXPZI03TxF8w3bV5gwWqJi7iGCrC4UTByoPL5U4CaMUNbco62+4nPofb\nYw4kdlvKlg7nfcxYr/vJ2jjHVM7PGjF8VKSxKTFVnEDmrMTwDdnJBb9R0MAB\nDukLV3s/JGJmdy+KxyRr3eBgLpu2wXh/RrwJLwqf5HWso+6UyyeYYRLlNMj+\nVkXppURiCijGOuzxr6OvCTSWsyOJSeYboSP86kzrD/2U2iJA+NIIMa3LkH0J\n8X5LY0ZwqpuDgBuCeaEnpW2upjLbPznKmrv8OiJh4BsronTKI5IDWjdCnPwK\nitJg4wS38MlNjCqjWWMD+UUYDGdx8X9YIfZQVcxQTAw/Oo0WuCQYezFh7GrE\njdgw\r\n=CjhG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIL4POYHowRd6xihTugcosAKdMN3kIsCoENXTcXaO0tAIhAKi7B06tkzq4iVG3/B51F3M26nVI6h2J17WCpErUqo1Y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.d00b098d.0_1630704420395_0.22631180910935078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.f29b3352.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jMYN+bH6xa+kwKXyR5hQCh6SSbPesFkhkedlARTaxzN6Vb5u1VqODPJ7otHWWM43XPvyonyAdpJYRfcCDbKOBA==","shasum":"4b6febffce73a84bd2d8f1ac1dceea223bfbf95b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.f29b3352.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6x8CRA9TVsSAnZWagAAuhcP+QAdsiegMwzaaVXa+xmF\nmhiSAWaSP/A5HMF574spfWfloH3uCSkGrQQ9yNlsYxw3JpzLTMS10IqXz95B\n8S7q89vcIBeW612My+WN7Xv5uzudohkYkoYdS6ZCmNvxdjOpTLOSeMyjeMGx\nsvY5JuadNsdDaKOiwVlreQGMhJbbP0Ku5RfrHZx++/34Oze4lWf/brGnlliw\nqfCwnpxWLwzwjDG/pJLPfrDHl/imXG5iQ7Jx6NreXzgB+JAgv0AzUS5LdrJm\nAHw2+g7qgCNvt85nGLo1nx6xWPOzTvXNArWwVHYHX9MLcqEVOxp/idW4kfRD\nI6b7P3RZ+sLiEmSPsF02rSgagjqbj4aKpbfhLWkcYgKWQNcsqxPDiWUOZ7Z2\no4sG4eWs7byVwrcvF3BNJWkhanW7iz/vaSUOvHJComaGbIVcohPIc3BVvrOY\nL7Wkv0hzTTiA2szTRzWCsnzp8flYyJqmAtxd+dcrRK31JNvxFkUu10myzMpK\ndLj9MmuY5r1PRabRRSz18XK4fthqf30VPK8pBRRXHaPlqvoBLZO/3tk92ExA\nZPSvnW4iEbrSAhqLU9iAEO4TYN88ruITqtG0d+uolbrfIUtsQ66fmEzWu4/c\n3+bmQ0az1BYR387KLEDvFrkp77j2X122ItChBRL5/2LEeEGFXSE3pjXXFcbu\nr5in\r\n=KaX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETYFgcU+C3cpA4CAIgkK3cjpwPvxiGb/MuAJeiylPVJAiEAtYedK8lB6g9kvteXNOJWxrhtD47j8I5JqgO8h1nVduI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.f29b3352.0_1631038588671_0.8111829785158966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.4962a163.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/7bYM9nFeLMMmF+tTtl4cEta+bQ77rWd/1NNyuBr/eX7+aixHf64hOCrc/DRfNn3f2sfVADClQPU3Qd10KlTCQ==","shasum":"d661975e98b8b722d7855a5300f2fdc0b45fe0b1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.4962a163.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uECRA9TVsSAnZWagAArTUP/RetWdoW0hbe9YHp9q6+\nqhfbnu5XckYxzCG8NAWgXmCt1XOjZiHunQpHnXkIMJNjszKx8R3AuIETax7Y\ny4PDkp/eVI8K2DzqPaIDZ84/PPCTy9mMQEqNECcrPy2UAiqBFqlX4LWkdqaH\nEdYU3GQGMRBN+ehdPdjHBzp+S3GWf4im/R6t05UlsvTBksaSl2y9qeIsmib5\nw1oXxOuQcnQDVlq1Y3t17zIiAn/BPVWD29aTUm3tYlXA3Xx1e3XtDA7UgcTv\nXMO2gSfpy16HHMN2WKopuqNRwC8fAkrI14whIQNmnvo8IM16Ec69kStD8daD\nY7SiAs151L7gq/pFTSNRlSSKZoIOD6Xo8aw5Vh4aTVednGT+shPY6/uD9pls\nY2VEG0mcYvYKiNSrACGCPWFRw2+LMXnYnOQIST0+PNsccBK3vb4fDLAENQHX\nesFya0ivqsKv6oxQu3r1m9MPyR+ncnd+SkBc+2l7wVWdPHi9h9EyXb1AzPdk\nPvx2zzJfpziI1JurmrD06yMMjlyofbb/ZWbe1irkkYlHvWnyEYFItSvq56HC\nTitAdF6oLy9rwJFMgTcW3GnmuJmWhFLne378spLJi3HgITCjGtRZpcVX7j4+\nqbzT1k+i2PyPPKDjPc1bT7ZRbWoH+YKGwOAK9cnMi9xVhyt5KZXhV0OFP+OK\n8f7U\r\n=CZgS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvUpMcqwwUn/mmiihMSP7Rb1qqALf36wKUzjkZbyVmzAiBh3Kcg+nmt+Wm12A2wRRKDjOyQPV4pfAmwOcSyKkNeYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.4962a163.0_1631058820534_0.7465359909088791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.33102bf4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","@material/slider":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/gW/LzTcrlVQvjkx9wzyu8yR38wG/6oyIiEfg8QETuruBDtYQnaOtumKFFnGXpVlwvkWHqk2pYD+QsRIsi2vSQ==","shasum":"739ad990250ddc08bf002ea66abd042312e88ffc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.33102bf4.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABBCRA9TVsSAnZWagAA2CoQAI9RLGBbzJlirtNDEA8Y\nZhOgNmPjhKSRKmgn+VD/RPSu6mqdva6Td6QV0YvLhOg8jnwQ/EguF5edyoxX\n8zovXSeGn6PpPmx7u/kLSt7oZcCHZLlzT3eYoicdigbVAexDFuuqTnwriEQK\nfVKlHSCO6Tz78g1NAsphqvO+xtKDYwMYz/Zf4LhH2ydoGNd3wu6NC2HP2M1e\ngHnHnXE795JkukakclBJx1fmGElYttqr6j25i1zJCXtqHYbHpcLuJGd0bF/J\nKrNeaQqVdbSfWfvxQRB+RL6MrzdHFunncAeqQQ91jNeDweBxGrL5kyAjyTTy\nTTy2JULUUgzZ4wAkSVbf0IZxtWzT/rEtUZNgFjAgS1LD13kCOkIF+B5rmUF0\nFBBOEyDlJG6p7jhmB6wy9WQqJ0U7xwqm1W+YCf0fNbojiwKIOv3Be7QkuMK8\nNg2IenYPiGdMJ2xwTjNx4QkvX2i7xJi5PDHMjNRZjjNOtUQ9QfloDsEhHrsn\njShVBZQLIBehOFe8+jjs3xRD6hPnJNP3o6BxcC95uU/3RwhvCSy55Hbs8np3\nvthS/RzWXJh4KK498+cSEIP4CLMC4mOXXILQxrsb/FaadNiWxSD6/dy6AFLZ\nC0yjHaK81cFYrmSePNV7+vZYO6TADhUwXCwU/CNksnHPnA2SdivgF7H7XUQZ\nbZJk\r\n=M20y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAioBcFjN8ywCJ4SHAtK0qff3YiKS/TxtI8rBZ4S2u+AIgEe0yvHqrDGktg+HhiNVmoNodUW/lSA3RxtxC/LaPKus="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.33102bf4.0_1631060033012_0.2673923697436327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.76c68381.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","@material/slider":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PTwqrEwmHPxSUdoFXVnJl1LzJ+/qrPbVH1ijKi6YcLWZywURCdt9RgF05dxszA+yzQ3EUfmwf1ItIguxD5NaGQ==","shasum":"8de1ccb9ed9573bda24f714aa456ccb2bf65b0b1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.76c68381.0.tgz","fileCount":26,"unpackedSize":163674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmKCRA9TVsSAnZWagAAQ0IQAIKlsZpmgFgzYvQ0Lcpe\ne/BdzyNqLkP1j0c04kE5naibtnO3eLTcGzk3xXFv8V1oyKrh+g9CD3T4AR9b\nvhHMV9OozTJSwiCGDouyYsYtBxv2Xxzi/1DOIc6F5PMVtel8UtYrZvXSxp7J\nLcLs2QwUriuNxtExOiaBeSLnLY5fM1HfmJmxSlMlGjf7B45OYWyualpEuBDZ\n3r1UKrhFargFHBJe0Ud7xzFkVMxt2JyvFomjJASDBigk5NVWeIhggJjT8aIP\n7TyzzMN1WrensKoWKk/UmNMIwG4qY2qsg4JwC2ATOV4Em3lhrsfnZlLJ/ZDQ\ndFE0jVFunf0wRGOwk9Lvrq+BcQzKMDlqQXMoZLT1+1+ISWNxEpOJJWJI6ePr\n7nvVRpyHgc0uzn4aUYwg4lhXj3bk6Odl5jLMmC+YC/KFburDGs1gm6PQL+dR\nxlw/5M//fnRU6YdNl3kLsICgvld0jeN2BZxj5OAE+sjY9IN7wANtid22Pv/T\n+EOL/CBKAPPuSNjPof9C7mCgZutTjrkIK1PjyP2mU1jy4DIz+Ezj176hEjh1\nOHQSgFv5ONwG4fTX5hIImv1GG4cIWxTk1lsMp+zEK9YpgWl8hcScCtqrgWYS\nDAg0L8u2CNvWE9CQRh3jGsZAQ+AjPpEEN4bakDRz2Kn9jxxO6aQUfcp2mzsF\nmsGi\r\n=hnjA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwCBwefsayIbpl7jpX1qLqZr2llSwSrO+NyZMiXwgU+AIhAJ2/XA8X71Ihk/1KJkmthqx8upCEZodpRH9tJXNbJAcU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.76c68381.0_1631132042853_0.4306694835816065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.17d51f76.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","@material/slider":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ougRHVP/utdId9SHu/09Yj2F4F1IQEklw96HvtHpPpOG6wQVRLc/UHwH6qzMX9dUrxNxfv4ct3y8sgaF/RhrAQ==","shasum":"e83e0158d56c351f2f0ee805e94f2f2c9aa9daf9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.17d51f76.0.tgz","fileCount":26,"unpackedSize":163671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUauCRA9TVsSAnZWagAA08oP/1uHIncAZvMWwhx1eAs8\nUf33WdM01N+Wc8uuRJ2LSJ9RoKhRcJwxIIQGTktaD2zSrADEVLlSLLMqtu4F\nykjkPMfMUkEC8jCq5lmqAbwYydVAH7xmO/+FWCgHSYraudStLi9OAwVT1/mE\nHHqYshZcP0c+n6FQvgWfD3ylh8M2fS8rdlBaYGs4+H6cGiOZfuMlCaiaCmQz\nehcWCxLAXujygHykGPapTZ2YCfp6HfGf1kWtxCa9+skyhXxLckSqUmjLkS4I\naHuI5WDX/aUxqQCN21ZU+F4vi2V61O07aQqifVxHuz6sEpYfMpTnnXBfgxoN\nSCdek5XLoZcYFve0yDsuIjGU372soohDY8qTQajicQa7MZUclDzHDvn6dmvc\nxAqm2Tu2u1lw9lWdPdmJ4/RzdzSEIFZRtcZ1BwiYifXS9gpQFcSWFEndYe2q\naQ5hx28IfX6+qOWGKUVbYHpS+/x1oSLu+T7UuD0lHbgou3b/hDh8LmMWNjKD\nLkQB/v/IY00bic5No5upy+6fuRKm/+F3uEgB2WpAQXRFCjUU8rN+hnAqPVr3\nveUlfMKnULojw50q0CBX1bJDo78KraqQsbiyZUNF/IUy+L3/2rydcnh7H7DA\nj4wXvT3+EzWBBRnaZiCqNcIwooMyT7tVw3rn78dB3ctY3W6QsEhEmiu2lMWl\nYpVL\r\n=w1W3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgC9mrCooCmqEYXK7YdvjVBEnMILiebl85jWCPpdKN1wIhAJvun3YHbiiaDVxWr2piXbicw6CdY5diSp6dq+JE4vcw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.17d51f76.0_1631143598531_0.7547492515164225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PHosaaQSLQzYtrC2t411UFDggmZHZKbGo7SOIqw30Fwtyc4T10ug3JAuksZB7UaUECWj6KCmtOL5UXGW4Cd4Og==","shasum":"5855a1d92956a44b19c9e0a33b785a62c19fc520","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.3fae6c2d.0.tgz","fileCount":26,"unpackedSize":163671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TrCRA9TVsSAnZWagAADV0QAJkSWrk5x9V0D2LWf9+J\niiOKzPUPGjniDffvd26HgD+G70rW3m9TAowcLRSUyesyYCcLZKM3IKcs162L\nqF7HTFDbhiJvWaAmCZiAWIlPhL+iGMhNO227Q+AK+AvECY1ye/NboOkfXsNf\n8s9EKgTpx7CT3Bg+WdraCy4HQ3JREje877qn2k4ahufpv29BBqNQAg/XApIX\nMyg4nc3fltgxivPNX9voKj0CxODbfuuoTBVEu9Rt0pFmQV4+SzUHKZrSM9iJ\nfon7P1nTr40N8q5KR1L51qIfU9ROhahEd+aPycMJ3VE/4Xx7yALppEjZQuzw\nDLeRsyP5cv2PN1FI+LS/UFGBZcuIVXPwShdAEUbWKGqtbwFlAUDbA0BwpgwY\n+6/RN+KKYdeTTII99T66LzUQuDUqRZAZRd2DGefHehaoltMMGyWP/k+DYqdY\nt9Sgx7/hiQHnfl/HS56D9qQ8tHxHTOL/SZ0uRtdc6RvQaYFVEdD5CxkIewgr\nVS2ugRXZmXbg0BIY/D2soViwS2fUfVMad2MaM1PmBqQFaUWJRiwNVseyEt2p\nXTqGxx8zWdqISb4avBz3DrRcsM5CzXSWAj5QgRfsf03L97mjSY61bkXFnLO7\n4waouqg9ldFJcNoVmS8dPg3gdBGaJG65q8fZ1XqiymffAbtKPhJcNEivoRPW\n1c8A\r\n=xpfE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVDFUgk55o9//GPEfFBjcqi4obUgCQAgK8mTzm6YlNXgIhAJZOAvB5uoCS28OCqt91yYRKyvMeNIMHHk797+dBBxGV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.3fae6c2d.0_1631298795276_0.6151368452392973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.f1958c4b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4wS+ahpcQbYoO0jV0oHgqatuk/kcIhgWl8kPKk+qqRh0lIFYmOPNMB4nN++tBeQZvmw/7vSqGXi3wSA8cFu6bg==","shasum":"e7c6545c623ae151ac7a89af9e4fef880a36e3f1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.f1958c4b.0.tgz","fileCount":26,"unpackedSize":163671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SbCRA9TVsSAnZWagAAoxAP/iasLQYocaQK/oZ832xG\nfic4rYitghZMNC/3XfK8GqFq5T8pyie7ZjEC+7Z4CAe0RGydU8A6zZFbQ1YQ\njEKCWGA2cx52obgx+vV16geNzG8UaMgFbxZLyIHm+OgZxKLnlITIWy7TUhU2\nQ+l5h0BVeX1gsCtViY2VpJ/M8Y+cgN0X4OiO4Zf7ijoMGftK9cMbLVdBhp2t\nntvCzDvkRjk6jhYJbwql/JabHA6tCYm53+WVE346lENddLeyfyePbIuUSh9M\nG30PVRgl1iVO59DDH354MZI+zQKvU5lAvttMUbak9JisO4XrugU3wkVQRZXh\nbecZ/MgdWsuSbXOuGr/c2U0SWgSbqbBcsntbOpXY4hC8W/ge0Wmy1oOmRtbt\n6Eb9JAtAtXXlm6gq81/Cp6i6k49vppMRxWzGC1q5NahrcD3i6rvsSFCvbN90\nspzW+P2nTLnUikf+6WGUNsujtGbQ0rc5PHII17IOmf2hCResfQ0eJoJ9w/VQ\npvnuc9TGfTkp3oRQgDemv7VBV4PsaZJUqdJdfZzgo9WZAjXlQvWbJdNWS80c\nhEw3sUFNXDYKI/CpBmxAu4BblgvGXPB1/ljJJ/D4xMFrO9SSeezHYGEHxMoM\nQIY8R5wZzKYjVX2lA6+vgDhgEwgm5M64C68UqNaQYGGQPCMC9wr1ndatx7Je\npbKX\r\n=7C9L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDBzBGMSRDtv6lMnUO9VhGcmMt17TMmQ1/fgJkNZfHRAiBLp+rA+C0llgTprmdW4Y2h4ocmJD7DJIrEGig3GkR+cw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.f1958c4b.0_1631560859255_0.6441047138039471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-slider","version":"0.23.0-canary.78abbd59.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GOpTl8icLlB2WkkUh7COQ9F0/prpdC1BYLSFpnIAhQzji8urJYoBm50U5WNsZ9PgOI9ccJmw9aXx19+/YLttCA==","shasum":"505235157401bf7a29f9cb75c1abedb361f97d7b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0-canary.78abbd59.0.tgz","fileCount":26,"unpackedSize":163671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IOCRA9TVsSAnZWagAAdKIP/01SZNVBlAqd3B6Px6L7\nPoemUbLoioywPfGqzQkFj+cV7Otm+XlNmApUjaAn+QH0coKz/ut3obS50A+J\n6cPuU5t7vDS05huKWbgMPFK9yLD1FgSjvlWotz3rnzAJuSCJmINppux9YLkz\n9UquviodxCd8h2F6XIy3PygQPpl9FxuuiFunzBrpl9/EnwI7GZxEpFUgR/tw\nLWmBcw1xtCYohqT9CdfZMmuMfcSQfWINl0dgd9YomNJTJaTDWeCn9ysum6V2\nW7euZfPpzpiUfNk/yecpsXXTmrIXxFaknwO2RkhVEXVf/wHCCnHP+dKhFYN4\nbbltMfz4gEnrouecjwm1L7mZKr8uxPGNMVrzVC9RYu5/2/IFJAVk/dqz5fuF\n10gnZiwIFVnkg57bs+IcdZ7NK2/ETEj9JXkAIXDWaWeIHwD39gqB1/g3xQl9\nJI9H+XB19BOq/lirGOzqp71cninWcu38++tCs3fy3/5SgtqO/sg+ynw4d/8q\njclkrpw8pRCt4VGyzrlnB5BkuB79xLvSYPGzKvZKaxq+5uExuCTPjzGbyA1G\n/N31f+A92dmW0y48ZaHcPce1cH4P05VFmE9ByukkQGwyRI30cPDfzdgKaFOH\ntdQiFhPBTcaPU0oHJMYvJqBqOESFmI/hUPId02q1T4+hdRpYTvjjfM1DuZDa\n1cEJ\r\n=5pMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtaLUSFdFHYLeeez0uuo42r/ZpsiKsfCWZbi2lAQe6lAIhALtqoywn+WIw/VZGQCpM5aaiYA63eR63TgJF90HsO+WJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0-canary.78abbd59.0_1631568398644_0.48488538103763457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-slider","version":"0.23.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-ripple":"^0.23.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-q8cGdd3q2Nck/zpWvuPCwXeOYDU3maxqDRvvin2Sb6sW+QqeGKiuyFmhiu+8nrKaHm1IxJAUNrs6NQJGRNpm8Q==","shasum":"1f9c0f5b68892db1d41232e17c0aa834189ec41f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.23.0.tgz","fileCount":26,"unpackedSize":163619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q2CRA9TVsSAnZWagAAJf0P/2lJToh6vaODjLkzMgyu\nrP+NgUmYUp4fvXu446S69U/70RuKJA2PQR/omKL2pQO1AARaXMz1zOw0Y+e2\nds0qJcG29bjqG4C8HqoSfDpjM6298J/5g27SLDcpKW92dnsYZD/9w56rh50f\nqNnhyFUDnQlIll5QvQXRrX0fany0wASO+L/FbIoQhVhuB1NkDUYtjBZtI80G\nuiP+QkgtjQMtRzDH5+cRYRk5uZOPDV8T510X6KqtLCbek504NJFjTqyM7z9/\nkRJx636xjDJAuygjOZcfpMdvWiS0h6dnimoYaR4h+v9mDnOUyf5U7axjMZsI\nARAXaqi4H2lhM0I2Z/z8eDeDpPUg6+ae1HbbESqtqhq/NogkAqGadvV+E+bU\n8WIzFI/VO6vWIVh9Ws6JpdnrRW2Kzd/py6evmyUyIhVL1lp2F+v3AHgzmYup\nOQ50xEEAFcWni2doyUFjVQ8hgaXBHIhpWw7GNCIgazhY8UCHqXVbHlJW/oZ8\n54qxSRgLyKz2EOt0ICaslNizgZcIFEb8iUEILus3a8dsxiUTAAH91VTdR4mn\nGOu6zD1adNBJ0LVVr9MXLH6M2nCxrIf38XxqUnPPC/0pNVXqZjIlXhEqtjkf\nFFPn/ejhQomG5PC+awQW2LgEEArxYg/SvpRPnoKh2lFHmwHDLwf/AEFodsG8\nNXFH\r\n=K5SD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8w2OaNX9+JxcReftz9KuCzcEESMEypQ6/5CRln0X+cAiEA4eQWRAt9ZG8MCBpxrzMZy4D8z9jvKXjuqH4HX79PRJM="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.23.0_1631568950475_0.722600547465988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.9830d665.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-drExNyMNRg7ZtgGt1HTstGsuG0VWW2ac2IhBnD0dospV0c9+n6+W+d7CWjEwxn+LRSGTcyVlFTv0ZBCMFHsllw==","shasum":"f04d31571de7bebbf9fd802e9cb6e2d21b7749d4","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.9830d665.0.tgz","fileCount":26,"unpackedSize":163671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8STCRA9TVsSAnZWagAAqJMP/15gMuhv6cQeuOxQb6sg\nobJRimkurllgSgDKHVgcD7gmA3SadiHz1bPfvtmnDtWAcIzWDo1x0GsH8iLC\nW1qBYJWsXqddOP2KxmA8CiiXsAzhbOVGWyEs/W3TLECnsXoxpY+1yWhnXdrJ\nDGNW4ZcHQDdVXw2JfGrK0DN10EwL0QdyjXQntunuzhRcqtppaseiDefsL/hp\nHAnp3vI1Ana68x80usUHcsbOiqGBLvzbnVJZQEwLLG4DVyMpXNBu1hsYdGpH\nH9T8g6h9FJBQIFw0MCK1o1b8bLEWnhCkOIeO0Ps4bLlqkUL3aaOwGEV9VBiu\nVHfpROsI7tYd8mZ1IaiVeaMmm1/zZ6TsMB+fv5uL6fnTbByHWzWfYb3AdIXE\nWuCyCIYpGZquATKwv142Fra1XzsfKWkdDM9StyP+hEDPRxmu8aSLHcyBYrvE\nk8AjwYZNzmPmjeQbeh+OMJ8tGwBiJJfOV54o9lRKaC3+f0K65wxuH8QEtTId\nXjy6QrnKOAqB+LhoqkIewPRDlBDZB1O+coN4ystklHyVt6psB2TE8u75wBwL\n3RoY21vVg8ufbjZf+2WVw9PcLcRCDxzZQ4iOXbl8z+zOqqPLPlMgTPPYqmMb\nDW7KJSWezUCpfrgyhoeYjB69bPq5HRwscEBUb7oY+ISgZ++6P5H3aKDDLCEs\nwTO6\r\n=+jY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuLtjUlBeceR8hHp/i34K/7ZJkURrTzCsFi0E79BvomQIgP03S9ueVqLAcsoa8o/ejDugudjDUluVamgnsvKSMlq4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.9830d665.0_1631569043701_0.23274424546254213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.20e2081c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G0nMfU9CvU7B9nFy5/Iwov4W76WzjoG5D2wLyX7uxLe1ag7BKi57ZaizvkZbX9Wpl53aCothiEDK/d07OQhGRA==","shasum":"ce7630f8c05e1940142b217e6631b58526f4cff3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.20e2081c.0.tgz","fileCount":26,"unpackedSize":163770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+MCRA9TVsSAnZWagAAMUEQAJr7PWsmxhsCSsCOUJ7i\nSaYXpBNq7Vcqjs/iT6ZLr6BkmDzbyzYQJciHC5YvNXjUeaAiYu9LMXnC59VA\neQfxvnnUvqusJO/GCPeNMWMtONS2zq3JYlva2Z5yHcFgV/otqy3R4Z2C2AvC\nQj4+1rZix6oEOv/6b4urytWb3nHdhdgppn7Wr23P0g463wlF3HJkJnBnsZD3\nT2Aou8FUHVCC2YmYVQ7Aip9T5eY3bNFeSUdLq451dm+aPV30OwwILD0b09rb\n/pOzFOkqtdpVOffzoUydu3J1HyPf8wO8qajo4UblAYle/tWEU8Vt4I5gqW3A\nTrfRvHWgctz30eJ+kYWDvliDNYqdTS/2v8QdDK4P48BIgSrFN7yChC9LNrd8\nvmsBQ+fa3AWEe/LDBuo8XVnhK/Dx3x4qb6VAZ2URJqkzHWImYoWx2puqdAFc\nOZHcqwLQuiONgECsD5ct95xKEP9Z9viG2MM+2Ed71VHiWeORsPdfrhtvczCl\nytWj/gcGSPOPkyVNzGXFV4A8RgntQRzhTVUT8od8bRqW2F7yWVtf5RO/QZNf\n8E+lqKn8dvcp6/ezywaTsA3WhaRDvV6n1gZlgtutf62fHt3M7mMAFTtjyDLW\nLHC5kTw8jZ2aR2zGtEjHlOL7aajbezNZ81qCIHDVwzIh2fYtdEHZffqkjjLk\ni8pl\r\n=TwWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdLYMg+7NwVX6haSxptaUOSoTy9ixJehxq6+X9YW40PQIhAMGOehrhidJ0Kd2eTe6oG0wbfXzn35w6n5OHPCfqXoO+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.20e2081c.0_1631575947872_0.9371438897913829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.583613a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","@material/slider":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NLVeYVhdo9PlazF/TbmXo+DFFWDI9ndfjLNyWY3pHan/RUYzjot7/fBE5LXVGUllPmA3kJHeA4eC7/RIGOjW9w==","shasum":"f8cb1d70b57f133de6f30f2c0b49f8df3e91cfbe","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.583613a9.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQGCRA9TVsSAnZWagAAtJ4QAIo3KqWuXZt+BZkU/55u\n4tU3JQ3vSCpSUBbNCVYL4MASKDn5SBRbeoNc83IgId8BK1nc+uqGESX+nxmQ\nkucpzp+hM/z5ZJYSpShe9CbPyt5+/wKkRgTzS63N572hX7/wRHJ8R98pW6hl\ngG3w2vB4ro+Z9ETakVsNdwYaDgCTV55DCo0DVQTXsEBjv8FVRmkgDLrsgRgJ\nTt0B61CrP/VTF9vMTUTyZJlTV9t8E3M2wwJjLIuCXiHvb3jZVStzc8zBug9K\nmYyikn7xM6cxbh4/aujSmqdru1glp1U/lIwwwuVeDCSJW46sWLSac9ii4vLq\n95Mv7tDzi88T5wsmdS7/NWK2p4X0arA06tW53yJYZGPUxbSHy7Jz1jJJF6ol\ngMK93NHBTMEKDQNOAIq4ZejG5RekzwTuwIrevX/TYTA84FT5bW77lkc171QD\n79v3jc9jCSLJWF9QSnRRjV6Aiy7ZCZeqNLrd52W2g+JQ1KjqzHrkpMAypBn6\nw3XMGLQy7RDfs3vNAMUkRO9QFE3qSdSkEJrOH/v5rXVmWy9Qdqg00AB66ypr\nQcy0oEWrqFztxVrNhdGwIXoxac3yx3qUY5bSUG7YP6PfaPEzV8enP89V08Zl\nefeEGlKvFLjUv8+vCz8d58CuT+NLLKBY771x+jaHhsuCnAQHKUQA2HOhlYh9\nQj1Z\r\n=01gx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwhNjSnpuiFWHDFlcjGq9UJF5Sg6KwhKiFvhmNm9zp4AiEAmvUgnWudCa6taKbAerUsFdjFtx/kJjWUv7E8sR17408="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.583613a9.0_1631638534507_0.6330412992532495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","@material/slider":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G0dQ0tf07R5qCcRcowMf1ac9xEScsRc6A7k+dOVgcISXGlGZhG1c1diatljKS2Ecni+iuajqkbiZPMz3exWcpw==","shasum":"372a268aaa200cadf6b186c1d87efbeae568ef71","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.0e1bd56f.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNy1CRA9TVsSAnZWagAAdGMP/R6FDj6KFtkLheBRMgfF\n0QfTl+n7vlppxnh7zHRQYUN0nM0lY4TVBn/QvaVENuMEiGRqMFjMfrvd3Vla\nJy8wsMQNtWx+4Vtb3bFFx2CiJY21AzBTaeY0rfD27muC43TKW5hh8ocEUVa8\neddU1SphY9x0NVtcb3ro3FGBAerHK9l+HuE4ao4pzhYUOJDbYedklHwxRx4U\nkaWb5qoUb0poH2X5l5rvGl6/No/x2ZU/EHN52thfwRS33xlt40GCWsAmUhf3\nGbUqx9WbbItLolyCIncOlQVigjOfgFlWfnKS4HftQDEF9l51obOQmXs8uedw\nnboH+AzEP03MtJwl33AJYkeb7lAJ0TAks6bIH5U0vOwMha0UUGH8EJPKHJRf\nKCwKGcxRiBd3FZi2e0PB29zfHP0m9+Q2GJPeCsDy1EnoFj3gU8SOAZnPC5Dd\nkWrtprGaIpPQiyw2J7PSmO5NmbHH9FroIm2qz+m8N0AEgaUzfLuWf8OPJdYU\nydZ9ZXtacjjjHBkcLJV/ZS14+020BaZ6APFnHvczW1jYFw547ESg4jq6uXmy\nrK70qBufhYnwJwhrfN/vEW7iUW0l4O2scaXWDlrUcWkGqw7W/bb6Pb+iDZIJ\nwAfWttINLDmxHp2eoS7VVM47LzJBr49KvrEiBZurbTDq+EJmhCzg4fTsRU+v\nRoaU\r\n=TDkK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6AyZwGW4kJTzgiX6mjbXyoSKsWBhG74KgO7b5FDZO9AiEAwWy/JkugLC3si80vRE4M8L6LcyudT3FQ7PHhFBKcGFo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.0e1bd56f.0_1631640757059_0.26959348644993897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.7bb1818e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","@material/slider":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NUq88wiOvI7xu0ORXVQbcotiMB0yJkOYmy5a2HtdSO0C3JDAuXGaVXMo+Hh9a5TYI2H20vAusFQbcweQgjHyRw==","shasum":"6b5c6429d89e8a0718c06e792f8f054d46e6857f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.7bb1818e.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/7CRA9TVsSAnZWagAAbeQP/RMFjptHwbJunueqEi+G\nEDrxPfQpcJ/C53mEejj+mk6l82zfOhlwLzg4eUSPd58O69q24niQw+3Ej9Jx\nmttZf+YGPf/HUL0ja2rr2KWf0Xcfmp5kqMZzW4ViMhCOd5ViM4RXnzHbyC1X\nHOIF6xDTCuc6e2fn84AiHF4Aa7YwRnqTmTFPwGahglZ8xk1xNVDiwI+yMqAq\noOIpQCTkcT6s34eEk7iPgo5kOkl63tfsEIMIvqRgLZhel1Nha9ky0XjTSeJy\n1PqFYHZO260CXEal0Vnqs/3TtUNnyM9MxynR38ithLoKO6RB1Z0KhHmKjPHa\ntjzqGAEEbfRWpUgKqzu6Aw0wh+lKO9NR7doPVPS63gKqyB1TIOCSARZL7qSO\nBqz2nmTTLiLtUjXredsIu2//e8TExGAZhNDsL+h9o/0TJt53NUxophXi9/OO\nNaSmIiWFLpwPRCa03IRYeMRmtFdND5WGER01jbP+D7cqNqHETmrof5pPkU09\nA8KlTO0DSSJPRwZQtMTQTDp9yyYMAueBbAq6PzDUptgxvqtATJWTBsOETSkh\ncR5d1hv7QRdUp/jGvuS2g9rIbDnQ/Bs23LVzVwaVlkyVNljc3uNS5BnqtRBB\nCWToWmEDEn7cds8AbRb7GAZ5c205M49mTw7pw9b0rTBCZOUuZbZCSLLFs5An\nD8OM\r\n=GYt4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0l7NuG/6Obl0rMQftiXnLo2vItRGQsIl3m+D1T0MMcCIQCXb0VxrB0Xn9leJ3baccfyunSB5nxEiJr/CnI4m8v5ww=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.7bb1818e.0_1631666170851_0.6501885495083408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.b5e665a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","@material/slider":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9dTm0hyw9QGD0xV2ITowVvawZD3w/WuKOLqrFa2L38u1l4RDKylbIJU2DXV8whwZGm4cJdLYgugOJ01XNIb5wA==","shasum":"5023e59097441ffafcc53562a41ca0d2b214ce79","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.b5e665a9.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfHCRA9TVsSAnZWagAAAAYP/jXnsH8YXBqXApkptXw9\nzMZehhKZcO9ay46Z2Um6uNJdryQeTaNxGj2d5OD2SRTRT1LQ0hRQb1jRS5vW\nIhj8/qrfYrlKh3Eu73kKfJa0wS5gVXGMDpz5aCKepCpmNTo81+b9I6oJYVjC\nhaNg6tt504E7/Yf1srCeM4EwZmatgQmmiQtrfCCaImOwH1kJK/Ji9ciS2cga\nN+iQV7pQuaneff6xdXyKeK/8qNKzN/A74RNN67423men0KcltcPcE8QqvLk6\noF/TsSGfRbR6ZohYESfHDnZfI7g9sy/eQ7hw6ZFo29eMQq8NS4oSUmDuKiNV\nmFwfCk0eLObRgtggbFbtMwAvPN6mexyCxIn20yPoNj8XfGDyLt/eNYkfuPtO\nbwtDoUg7k1lrcYCs9ca6DIuNxmcJqFwSIBRRu/5RYS+u54fo8TVJSGnduVVO\nH7frMvxINalNXuWAcdUIB9BAcbo8cE0SlxW6fwSsfly9Jz2B3fL+H8xPR3va\nMdZYcOlIiGA5YWuN3qUa9F4IisD6AARvp9XNFd/7Y5kx/Lwo7g4XjKqn7W75\nahOwJJ468Fl6nTTf0EaCxg+RE6gdagiMJbi0cws6yoXlnQrXahSsGpSDPRqY\nMKxEl6l5I32dsH3QEu/tR5P8/PzyMHkr68KXd8xI5QjsgtcKKL6p846OPSHv\nQy1c\r\n=tv6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICj0M7ZGZVQ5wvR62/FSCrqzz2q8J9CFWeOhttVf9YasAiA7kgRTKc60W80QArB4qwTArNmyZP+CGprh8UolnxXY2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.b5e665a9.0_1631729607283_0.530672402952779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.ab1e177c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","@material/slider":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/bM0pGM+YxzTA66KFgebUIlPo/P++QAITiapofIfcb6Pd3MhHO8Uve/Mh4EXkmmtW9hD8I5bl4UggJwpx1g9GA==","shasum":"43daad54dac7ffd24b784c580b31806f2567fe5e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.ab1e177c.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj80CRA9TVsSAnZWagAACCgP/0cW0+qNubJx8quFR4+B\newxz+6aBhuvLB+tNTsz5tq16urwwOZzl7su6ZgDNDvzxh4X5Lj7aUYbX94NW\namkpFrs3nsqoMXTODT+ZFH38lXLw7eZnyjL6C91w5oO08pA807/i6+F5Zd+x\nnf2aEZV5sdetPF3T7AzNy7xVKs62cGP1gXmUhmXxyn4KeeoVCtnNo8dV8fNp\n7OkLaeCWZJzMgZu9+5HA8DR6Ne3PwAbZg2nppOPpcNuiMYfQM4wBhnMRCGC+\n49rwycSdcjkyW5xNRdF2xvQEoW9s69FFW2NZintEqc3V5dOnm8xqB2SmUzlO\nxWDGDrwRBKG3YMszgpdnEtSQ8jF7OUAwp7pwRwkjwvlZlapXcHfxXAS4XjPz\nlSgleUHmA2QzwDUDLDYNqM8+XlIu2njfoq9QbX279xUdgxgEEAsBXTYGl2Py\ni+RrC81jcX3vtQE28KXgWLVa5e8FJuZL6vBKvxos/fPPNL/M8pN8zUai0xW4\n7zArbttqXMjn5TeUXxkiyt7KTuNSOaNfi5TBp0K8Wyxr9kBpqArGSU9PwLFh\nDbgPiw0TCXRHFdmHCnUd2TZBMmhurf0eNa2T7HWzjkH7a0G03sWxeLEwTCiL\nFZiNIri9UpyT1IN9KBU0itkm8YS9Zlzog1+pEDukO9tH+kGiB0QJFHLWFwpi\nA4DJ\r\n=CWw1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqUDGIoksO9u7qxLZ0zUg3e3qZqVD9FY/dqx+5IDpt+AiB+DSZs4vlTus8wVfY8jg8HQSGtsq1N7cjsJ/S3ceB35w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.ab1e177c.0_1631731508105_0.1657586485866862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.8dff8894.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","@material/slider":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Swqtaxb826g/9vtNi6lvoVJG4dtB7YJBAjy3KTf7JGSCyUDHcEE7GA0xhUYgS2NqPhVTp+2owcoHomm3I0QTzw==","shasum":"cb3c11570d3512006883e43bce13ed348133ebe3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.8dff8894.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTECRA9TVsSAnZWagAAE50P/19hUIujz4vjFZTGgfIG\nNrDQ1HK9bo0XIg7nT/gZlt5eeI9/e5IlbiDKSsLhVBR3X3fhBfkh/zy0quJn\n35z4OIXqUq3orAdYOJZufEJ7u1wcWzqjG2C4j9gWP7xCUOAVDoVXGMUjHTMn\nKz3ec2SMt9sCo5hd1dlQ8ihX/3UHvTU7cuHtwOOf4mxvvZU4iKWY/N1T4HGo\nHM011SVjfH4f1enhKoq/vTjDQ6OQcMWpQTxXJqYo127GTNCdiSOZEd1t6mUK\n8r+yXmWU5T2tUEC1I9zs1iGrHr78pTcbGzP7qSt6mmogDOyLV709rpZuv+e+\no1zLA0rxjIRZI+rT2L+er/YM+7YQB8uCMDWpng4+6enyyjyxuQfwea3TzVBH\nl6J47xMPRI/YeP+jtTPiqmiEy/sIcgaPJ0V5ipBk8iWdKxrL5Npzo5B/1JGP\nwsedEsbR0usI1KIPCiHif98hf9SilLkK872aymL+PKh+BLxVzIRVtvRlRPaI\nXLT8s7g+FkVPEUqxEjz84UQcnEP8mK6t8ka3kyPcMZPwYx1ZmnPOOrGRzPg0\nFz4oNU580RGVzL1nk++SMkEsZt3i/PAkwtLhQwJnrEV9iMO2LfoPEWykuNay\n2UUko8QyaBDNRUvu+3a/BdQbFyknL6xUr2pl6+KDoX0IxHJ+jBF8UMv9kds8\nLqwX\r\n=Gumy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr31c4NsZAMpFv1DERCmHGKfFEbc11GHu2HgakdxYu6AiEA+pZ9Ygt6LyTj6Q2Dfgelm/d0fRTobYZU/GU2m6Qh6H8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.8dff8894.0_1631732932791_0.2399185628187961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.9cd7e927.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","@material/slider":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tk3qvoXPAyffpFpGAgbsDE5a8R0RpBCtno5x19GuLZBulJ1HPtg+S3VX0mylNRUS9XL8o+Xdl68iJan284txqg==","shasum":"dca39d510a1d3095da795758f2522eb433f09972","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.9cd7e927.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhdCRA9TVsSAnZWagAAED8QAJs4OQdvVbkyduh/Bctk\n/Cd3dhKCCbSAmMVwLMpzOtolefCYtBNePymVk/MiqrwQYxNxFbara4czRruT\nh89O0cZ5/SEMCzZZQIL6FWEB7ylCSJkFDc9ucGLtSpkYyqizz2O7KSurME3s\na1yDM6sb1O5bbdG83pUEffPH/b4RHXYve695sHq9yC0Qk8p6iVpKk5oLt5pq\nFMiHMkBmbDSrP5mZF8ngHn4820gs+a+ODV3bjL9hq4qC5Snopgw6sxGmK+32\nD+0f33Xwc8cgML1WBxCexOK2OMmH1GsnNxpj/9WWDti8qnEapzl82K+jPw1A\nI5U9lyqYRH8nyRNQqqW9I5NpU4B5dt8aFRO+YHelUR1APuqL5MmuCPel+01H\nXgzqfS9oQr/SY0i9sPl6li8p+tcz3jcVVG+t3Ai5XobKKwTKupJCMxfhWa60\nlKDAGYDc5WDWEv6xEqf7f9b1FUCY6roOxANKkztQ5AlXRl9Ayc5BgHv8/stL\nzanYRYk4RireJ+SwxFiOwNcfXY+cw1jRbyXBNrt8yPcRqrnSXH1ewtOneNay\nblB1mP8zp9hDib5evfjh8kQg1JgWuQ+Y+PzX6XW9zUvXfSsHTm6QM+SGgV2b\n90zWifjdRKdZMQTOXCmcGvIj8qJVWanx6vkwIyvjPyKSotjSKlWCW4nIr0Az\nNXZV\r\n=ImVX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2BIrYkzIOh0KfJ8tdXPNDvFo8Wfh2UU0T1Q8M7IbqTAiAOxENbMPXRSHgPlNI9p6cNUOVPighhnWHoP//lk+jdPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.9cd7e927.0_1631737949563_0.09240966156562624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.a7132082.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","@material/slider":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sYhxUAxY7+VBnBRqm4O2drJwUeyB4Iswfd6M8/CanEXu4r7tq18PDT0G+p7c/Wv6CUfN5RTzPfgPf75FiANSUg==","shasum":"7f3e3bbd5e61d48fbd429c958b126c996c68a015","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.a7132082.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmZCRA9TVsSAnZWagAAoXsP/Rw2Gu8O6Gjvaiojdjom\nqfhHuTPNTwgnNX+W53Yh/ydxdfvZ3Ht2J5x3Qjgw1NqJJxS+2x2Q3918iMIK\nMyw4OLKF5U59TmLPvaNuYLWgMt17XYOG3mlUVccJOgR77Ak+gERQmXxeHztV\nV3JpFfFS7xy5J49Da91DkKt2/UaNPZkxHXLyf0ZL06x0kpWwclnpQsII8LXV\nQW66iF9g4P1zYAeEmBQy3Xufc4sATnW63ehosrUZmLZyoF4di9yd/RYwd+oR\nBdz29N4tcXMofMn3oeEekzdBRSiSOfq9ONwUAqfPRLjKUB/XnNFmJRx2Xiqa\nv0eGD/J3DOiOt/JLiugXkCaL+ewlmD1HGJD09JSqtWJ9T+uTcLIJdEG7Vxf4\nfEnTBu0DNXMowHGjWZUAq9l4DyWy3fdHSeSHkuP59eYBpj8NHkmGMe26w9Uk\nPXwczVKa0haqQM7HuEyzib6m2pMNQq2YeB+Mtvz34WY8lsQPipZVs13ItEXI\neOlBqrtxRHQN/SBusfhXSF6bCpZmLKX4JhZbAtQRrHryc2X1+C31p8RHPe0b\nqvHVrRzn5pLFdBkpOYLfSQ8c/x6fDbqhpujiS/BTHJzMGXo28k/SkVKNhNbB\n03aI3ew1aPq0wB6SidAaRdShJysV8JnLwDeXtfflKMveuwNF/ZSgxzUMgVT0\nNW44\r\n=gWWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0XPw7ZzQn+FcmRa2RS2z0GrSEz6hj6OkAXjjRK3MbhAiEAgy+4ndGtB9kir0yAqs1W9MUXTlILN78lyApT/W8S3Cw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.a7132082.0_1631742361104_0.7192365870582202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.cd9110cd.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","@material/slider":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jB6a3f45/QhFgw9KkugZzuPVoSXcK31nFU+7HeOuCDLbED+j3dVCm+da7W/bbGQdTEYnXItkhvP7cjZFBh2YoQ==","shasum":"edd533481bf239fa8b35d1d6513d8861a382001c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.cd9110cd.0.tgz","fileCount":26,"unpackedSize":163812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LRCRA9TVsSAnZWagAAbNwP/127qCkxRvl1q3qLY9+7\nA+/rKCB8lXTfbRAPnpCZDisGCVI/s/yvcOpP11VZ5kOBFPCXUZpy6lt+nXEr\nzitU2uIX5eDfV0sIP3WpIYQHhEfIHK/WDDNIf+YhovGjzJPBMvGb1/RjVADF\nqVX+yPw9E1Zztjb3/tzK6NSC8ZhdOWvkL4VGjdINr2VHD5LMSWxqujH9Fe7T\nlElpccnwBr0rEhFbfttQzNNrEu5G7dkGuP0nmfKl1QQSdRqY/wwBRg/I5DwM\npT71yYYP/vEMh0I8G0Wc0pZWL8d7+Wz/cFAXiPSymWVIymixUakFgrFoILSM\nKNIhyPktiGKLXaMvZTKxLWf7LFlPOpyVg/BEtvg0KjLVn2It+cTuhv/UOAmp\nGW3JgU3B26TG7hs4E8l8tK0S7tyNgw8e8bu+gEXftS9ye1ovFIRwRaLBkKet\npxSH0f4XJ4X41B9DA1te/bQS3pYNjQ5UQNrZ6Xocdm9kv7BUnEZ3PLzgOSea\n9/xGCGZeWDxjM29OvKcxHUtpspgFLaO3wPgT5C2Mvi+wLqTHmjgffcftyMqP\nUr1ePbIkTD7L7C4z2ujCSqDomDnVeXhxyOt4HQX7WoQTk/FHVN1GhZ93RIKi\nOH0vaIFKl4oG8I6QlrGkzXSnHKY9S5Fu4iVLGt84xOyxYROPLP0qy+Q9lffH\n+gAS\r\n=znt7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjtu9Jc/tyhfy0Jwd5hQOx9VpNEA5MVKT6r7b+452WpgIhAIgk5LLNnYO181e0L5ax1YIVfiHW1JJFel0L4GqP+8Zo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.cd9110cd.0_1631814353466_0.44652275658852036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.1e5a9883.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","@material/slider":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vUmXoQXU9uhUQ9ZCfumZX5Tg5WBda/EO88Qo7u1cey7RzbyX3SgsSwlls9uYKfGXxeQOwH9sG+OLieDwInneFA==","shasum":"6148ffd210bf8f715326f8380c4f13d8569b3c19","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.1e5a9883.0.tgz","fileCount":26,"unpackedSize":163812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqJlaqqqqn+5+c8klkxIitNwi3wiqHgkCTkc4MteB7AAiBBXKHhVXmLRoBpYcFvcxRJIh2Sxcm3XBVuru0j+961JQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.1e5a9883.0_1631911157406_0.3820013202153536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.32c830ee.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-cDY5vLiNlQEILNk4VYhJAkTZA90EKA6okfTMTtloeyofkhJaTz+e85ZMkPpwlwHkYF6fi4UQN+ca1PCeoLRdVw==","shasum":"0a52a0ab395bd4f99874a308017e4c102ab60992","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.32c830ee.0.tgz","fileCount":26,"unpackedSize":163812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjn18AriNc7BNSShRhehfuabFniS3OP1YZBzZQfqAjqgIhAKk3Zt0FBAD7A/Xz1798ch+69wnvPHxI/JdQF1Zys964"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.32c830ee.0_1631920136735_0.6462010747498486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.1de87bb7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-9KSAGlQ1KyFJrJX3u7U8e6K577J6yaEIjjJ4Q4mckSDPo05vTWkPQAHeAJ7kkBMwis3c3Ap8NDl9rC+2rNqXRw==","shasum":"f7d719741f783e3376b86aa29351036347ca814b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.1de87bb7.0.tgz","fileCount":26,"unpackedSize":163812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRAPnt3DajuUYiNxKr3Ur8cd6mVmtbNtrwdliM1tAucQIhAIlKOARxIf6MT42qYTXdg3AlJmO+gPsgWq+wydMiB0U6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.1de87bb7.0_1631991138636_0.6574427633095605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MoVgL/5BaxPSjLbvaq4fRGc+cVS/BnvG5CCPGKKOx0DaB+38LtSIoO8Xo502Vh2pkvZkK2cVFAKE3TOnBOGplQ==","shasum":"1da6193eabc73fccd2e11230195339feb62d446e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.f2ea80c4.0.tgz","fileCount":26,"unpackedSize":163812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMJtp94uZ2dODE8ga6ic1keAenqjPV8Uss58QY1pv17AiB5bCaO1ECGImoTFM4qjh+j4qwvL++UaDAgI0mDjLeTVw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.f2ea80c4.0_1632160504213_0.7707801138517856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.569d739f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-DOHYSZ4iq2CM5ew8ATlznYvtEVIr9xncDMD6Ig6wz237twFa7faAHt4o5tE4jUUIIH9Bhemtair5D7R9wnB5VQ==","shasum":"8811c17a8a5626c0c1136f050c4ba020ad6c4b98","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.569d739f.0.tgz","fileCount":26,"unpackedSize":163812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgEFUC2S+LhyKpgTZP6kFLyekx/hASGLc0y0rERJDtcAIhAJW88B2RL+OcLS16wc2rqfOhGBcgPq6AUm1xKum18vVW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.569d739f.0_1632173042585_0.9857339801429092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-slider","version":"0.24.0-canary.5a434a50.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZHBYFYTfZvXFAVmbbfle5PKi28hFgyUNqWY4h44niraxaNR9s3jFbNnMKqJjEntV/pTw7xN42wSBfA+cF+5ssA==","shasum":"83e95a9933222f57b78359308299bc26ae82460b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.24.0-canary.5a434a50.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKMifjwjEtKo+nHj2wl0jn0Qu7XaxAXG4pSf+RchFKwAIhAP9DRFB3UvtbAgfgU7F1vSrqqEHsy3y0lOUzR+5M6KUH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.24.0-canary.5a434a50.0_1632189656590_0.2452772478807681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OGGLRoHbs6I3OF6lIEnAoqk+iIbpYzU7eBCE1VNsjQn6YvGXyyMb+lSImKRx+BGmdYw50ptMzs3EmOpZii47cA==","shasum":"cc0014e2473ea000b512b45a2eaaca41331828dc","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.b1c1ab52.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbtOt0dryQ+QPErAEH5MYq+5Ga4S7qewJYM8FOm9HlyAiEA4RgyFI0wB9YnFEvtJymaljgtrS6FRhNhUdtRYbxUkPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.b1c1ab52.0_1632193940936_0.5108752683876137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-slider","version":"0.25.1","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-ripple":"^0.25.1","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-ex/DO7zNaqW2rp2uvfVH4vUpt6RItfs4Jj1lPN1gD4bMa9OYEjgXwLDtvIzBWWw/9Cuy/cBAOpn1YDpVGXSpuA==","shasum":"79fe2cf868823c4dc8db25130024194bc61cd666","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.25.1.tgz","fileCount":26,"unpackedSize":163752,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzn1aZdTktRDS3vh0owJSTg8gZJawrFOuwb9dd9PYYYgIgJQZHnXExIGsflSdI/7z4kjy+NFVbDYzWl65c2yuqUDg="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.25.1_1632193965291_0.12445814799727684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.ae060177.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LMuyCrLcnnXPUJn8n03JNIgOgV8ykZtIJTKV2n3ZJW5i46PvZw5zWwafwo4QcWWD5xmWozX3ZtqNdinmLbQd7g==","shasum":"3fdf845b202005fc5850eab85a30c19930713ed9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.ae060177.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsjUnqRXDV2Fy4PUou/dQBBJMa+7OirtHO+mXjgMIQRAiEApUEjkm/Jti+kQnbggUKRSX3MpzHPjFuvVf9h5uyVZ6I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.ae060177.0_1632235098007_0.5748393540455914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-6XykmlWVSFfGenW4tmO5Rze13izbWIjCIGkg2VwwxG2PhckRiLRjaefRVlyjoenlgdc2VR2hBRxqJOCf8lqxGA==","shasum":"e7ef0a7f1dcfc5fe8d7905243fa4a9bbc5cc8cbb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.b6fe2a12.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfpC8+EAs3eJXVWy7ZEh7yKWxI4aY3kieqDlEE/+A+dwIgNv56MmTFQZyWEmLqk/Ur2dZKw7XnXRQjLOxsflsj4ko="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.b6fe2a12.0_1632341786892_0.8974693964743563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.07e91417.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hSx0Ry90EYGsul3pigYCu8t/nKVdX4Ki4R3mY9L9gMcFb0xWYlrbur2Hjqh5jsTpqN0YLcU1IMnUbnXpyj9NWQ==","shasum":"4e3d88c2fe66e352b00b41fe837ca516c847791e","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.07e91417.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBqQQYrbailSTUazUYhUsZYuKB5DkPt1TQikhm7zurYAiBu1x7/XStZJK3MJzwT4GOtctDeBOtfOqDc77Wv7Athlg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.07e91417.0_1632344758624_0.7113189759165437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.e2203ffa.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","@material/slider":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-K4RQHy+8XmVeJb8hgd1lDqQnp6pL2cV73c2Xkb7cEq1zi+DBP9A3nt4tkj9w3iw8mAs7ZA/AsHjBnXNzbJyq8Q==","shasum":"eb1252d3ac0ddd93a54ae60e913588ea4940d255","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.e2203ffa.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCOrCCtYkiwHf14eygYq20YzB4vt5gwFaoguN9QQI0MAIhANHtIkn7arKhXBQkTCmK+PFvOYmQy8UMUDR1+TgI73wp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.e2203ffa.0_1632421668283_0.9675970817523705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.4abe237e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","@material/slider":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Teofq6CjLD9Ld1SOTQBxtsidxv3Cq7hNBls8NaF8uEauMvHiLQqrOPPTvE9DrPW+Xbyl8Tno6oNuGGbjbkzWDg==","shasum":"c505beecc6be9443d8011f50d2b1630c2fe67dc3","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.4abe237e.0.tgz","fileCount":26,"unpackedSize":163804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDahvUwp3ieZaVd986TBc+3IY6nIZANGacx/fq0Wt6t0AIhAOyg0w7vxjjzYddlJh+au2+kK4TYwtt5yTCW/k5SOmpR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.4abe237e.0_1632504678835_0.913065720968238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.6278ee5d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","@material/slider":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4C7jqeVdu1yZAOZqVlvX6TZh3baRQYeMb+ZPvvfhWcBtao9vPozC9zeENCBNfcjiX7oTq2GSTWbURSkH/p2Ebg==","shasum":"bcfb64b2ecdda15935c9b260c36f1a27a27d586f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.6278ee5d.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiY4ioJ+MnqRY7WuAvZ/X6h4sr5quCkgvZinyaJFIDFQIgMu0+dFaPcZytbbea/2LI2dykXRi11ihoWKaAmUkicUY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.6278ee5d.0_1632767492007_0.9508525013297728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","@material/slider":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hD2O8iG0cVysgBfQHc/1I4omgwqCfbxIpoAvrtRuAjEJf0tyRmRSRDkGmk12PCMWmgbX+xtUOS/3PM+Rr086tA==","shasum":"117ab5d9c4e34f81e791ea0335c827992c50b73d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.3a5d5f34.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEc3k+3e2m1Ml9/xIkTLCH2zjHfRvgc1+XINQBH91MKnAiBvTROLWFL2s1zLGNFNgGh1iOIYwW2xfLHdFwNrTbdG1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.3a5d5f34.0_1632782502003_0.6976378915508574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.143ed3c8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","@material/slider":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-NbQ3C0FzAFWIm3EwhhEFqIZijYeSnBxMptYyIhFB2/b+tEwy45/WeCHvL4iLztUfNig1SuSZ2nyowwAcIws9WA==","shasum":"2c71e515e08303dd2f143d58297ea719938ed0ed","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.143ed3c8.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIFi7Xm9KAaZB1Q5dBQ7UIxP/etBXZpkdHGptQSyE6jAiEAjAQaoAKZ/3tsCukzWi/XnPDPqwp8kUQVSSmujFR3pCg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.143ed3c8.0_1632880261400_0.6417827989031557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.e5923d68.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","@material/slider":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-saR2e8G1BAZuMfoZmcooQ7V+yQEPAISu/JBy7oc1MbfuEOqkwBjRnA9Dx9zgC2MZls9IidLZB0WCnkPQtEU96g==","shasum":"f437f3da0ed45439cbe5b253fca05ff4eb050f7b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.e5923d68.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPGjD55leBdPlKBx5EVSH7/AEHq8+wQXfLtRO/GfE6NQIhALdBykqP/XDfcbscreXNfhXBPCTkmYkYY7+4N/u1KzHH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.e5923d68.0_1632960360121_0.7945726213784035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.d8ed5109.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","@material/slider":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-DEVulyRhHA1K5WehwmuCJfKk8xQXl1yHGhuE8spG4Sidv2L86uxqNm4oz1bYEq5soY0gpPcWWYrbWlDADl/cPA==","shasum":"4429c8e37c11c31ea2dbb5c1c31b5b683df002ad","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.d8ed5109.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRLxH7itQenIKxzP9kfUxsUXxCqbwXPp6M0xxc/wmjrQIhAOoR1Y3DCYVAoFWJ8YBewy8tlt49LlG5J5Vr60F+3r5T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.d8ed5109.0_1633044843488_0.7226763547636486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","@material/slider":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0Xl11qqXH9j4A2zmrOyG7x0juLx2QgOkXO7o3LhEEOgi57zvobc01D64tYLkHkPly6EPDENurSowU52fcZntAw==","shasum":"ecaca3499405e9ccf94a31371d17e4f4be1e5d22","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0efb9c2c.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPHCjlvyttr8a7X/eVUExttsY9oo5lPpc+DMtWhIqARAiAl8SBC4iZrpoCnvgdCGMCqabo0eTEzkNX9A4Psm2xKWQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0efb9c2c.0_1633140507001_0.48567327584501063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","@material/slider":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-PkGLRKee6bk2qAacPnBQI/3XlEGr+bVYQQ9y5y0XnkcBGfLmydmf4FxrSJCH4ZEB8exDISQYJ8Ua0WGzECEq0g==","shasum":"c435e5e656b8d6e8ef9ddc6b5284f79186caa25d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.1c9adcb3.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/+1W+4Z7QdxptRw7VZKH9aCT6pM6pyMtn8TJd0vTK4AiEAnh2iS2/o8XlWeF6cMFJ9g2By6WtFwHPQZXZhZaGaSgs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.1c9adcb3.0_1633368823872_0.7484465886687597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.dfc00d60.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","@material/slider":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-+XWg9FHmMOkBJgebpTIfzxKyvfiFnXEgiBqsM1tJ8ATg1aChFX7jc8MKr/Z8Kq2wYO5S/tY+R2DIMXKUcy6EEw==","shasum":"4d471eeb9452f2ecb8ec4df3a3d23209862039f0","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.dfc00d60.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAI5CSCHHTvk2gnB5v1tBkd+lD9VG85ewS785XJ1WrAgAiASu3zCDtcPwmkRbgBhGshoI2l/ktONKOz0w6LGIexdlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.dfc00d60.0_1633741044910_0.30286442951322523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.c3aa844c.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","@material/slider":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-IKYaGYQv3eiR5LdS4HUZMlmHgQTQeu7au0rFvNoSZM8Zr1SLRKiiG6g6e3WnWLs/eKoMietBXe9KrdxcMZT3IA==","shasum":"1d2bb3d82ba2fa410ffe843cab4d943e90c7b0fe","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.c3aa844c.0.tgz","fileCount":26,"unpackedSize":163754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBoXwA2wNd+AvPpBFf0in8HtTRzw+KUXKSj+7IgBNf6eAiEArt2KbNfTAv4szgzXlM5WSQB7l3aEGSnZ9P4IsytUGbQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.c3aa844c.0_1633994071420_0.546722981585555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-slider","version":"0.25.2","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-ripple":"^0.25.2","@material/slider":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-o/UFwYhQKQcxriwQ6tgtX+tmbx2OXbD24TpwusO9+bZFk5ryEv7stglhNv7c+xemHP6sUi9a6erbbIJIVGVzoQ==","shasum":"9fa9f69d6a603c9359e8e882f4d9865325a0219d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.25.2.tgz","fileCount":26,"unpackedSize":163702,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaN8rguVWjmbmmchETiIDIMQucgwvAlNgGQSf98L5VjAiEAs84l+OGpq0w/MVLkflT6TvrF7itj6l/25XwYOvzSr6Y="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.25.2_1633994313291_0.05970980723092345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.406d6fe1.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","@material/slider":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-vUlCi92WPqYu1/XL9u/PnKX+USoQKDlUlSFSVAr6Imo3tit7lZm/j06nnyVhfIjB/KW5HK9XMUdOC9QwEy/MRQ==","shasum":"708d67a412d99293ebf8c44e8211f0f426a0d0e9","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.406d6fe1.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5l6e64qswzY0snMDEv4Xhlu/oiFhiozsmvdcbPIIvzgIgPb6dnUkSAw75jwGKEI3o45AxaotWE7i4QQghe0Fjlu4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.406d6fe1.0_1634158779315_0.5353862723698899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.ca0a674f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","@material/slider":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-JFAVEuko25/AiK1QTfLiRR6CoFBIUNWF94D3pEKpO0rG0dK2iS4mGxuWQVJDkWYjwNpqu3Yav1J3F72lYrxq5w==","shasum":"44099eb9900e47ceb33444b63e4b9ff757b8cdae","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.ca0a674f.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJsgaL9uCi0FLbyxISn0kB9j75zcKwx9Xi3xr0u1UzAAiADsQLBmdAX3RcyFsZNXY36AiRc1B/za3nLYJfVWo0TGw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.ca0a674f.0_1634593026835_0.5031156717544316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.eefcf660.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","@material/slider":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ermKFUAi1YGqt4UUgKl6+3afTKPZ0pi1039nMUqULXugUKJhAQKJobUp9/y81s9I2erZhlcemgIuvUU+1mDnKg==","shasum":"14bae414bad9d38d9c939d9831867991c18b4d6d","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.eefcf660.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLDAbeBM7af9HySB4AOheMy5DKmPPfKCzT8NHabm1FCwIgZyykvJO8mdSfEJVWxsLNt1xLJVe9/o/G5o/JPYmp4uw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.eefcf660.0_1634765027467_0.6066998811062021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.d21acc8f.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","@material/slider":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-EtU2ajF5EWbcRSqHjwxPdDeQBIhe0rBDDYCnVHfDrlAu8DcSGZoMflqdWAjxLg/ncPBsz/FsFKTpIEfcJJ4Agg==","shasum":"8d5a058da601d1934ce111b9d2d70bfc2af47928","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.d21acc8f.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEeMZcmAAJqf5CgMrZylNerAr5A+Xw4VBX7UbWXsyggAiEAseL17lwaQ2khNloaST9fYI0U4xZk7CMg2kffXXJr9xY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.d21acc8f.0_1634769160135_0.6385169836384155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-slider","version":"0.25.3","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-ripple":"^0.25.3","@material/slider":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-HhjOwi9s/ssGrMaeOwvVXAZQJ3RQc7qKBe7KBA4diRF3Fe4UvjtFsXJN5eZAXmi0LwZPWNnzxKP1JAQBcJWszQ==","shasum":"9d762fa4c81aee30f4fa80add7d62018dc134f76","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.25.3.tgz","fileCount":26,"unpackedSize":163662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXtrDoTfTRGEuqQhXfhx6fDE5TgI5kvTKiZ6jM9gbkhgIgKth56LOdgCMwkz+ApuvRV5ihJYQvp9ZkBu+SqXIHheQ="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.25.3_1634838944422_0.13057936731114927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.60449b7b.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","@material/slider":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-lIG+p9Ap8/y6miTRc/4Lx+8fiEGwg+PnuJJd8ifSjuvDlvdfo5Rooq0HUaRRClDVF7xiW+tvNTF6Z/BRzSTfPA==","shasum":"b65d21618ad423ca36b05fd20ae2495f55dcbf69","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.60449b7b.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJzrIfPDI/PRtX+VqWScYqNgk2JsQfGQnCTE5LO1WuFwIgfVrNQq/TRT5Pph9VdBDjgGEZuvzkn35eytFEBF/WJU0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.60449b7b.0_1634840259304_0.27794353061267874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0d8084ed.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","@material/slider":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Jwu+oeX7SlX6Jt8dPlLBA/d2LBtyGL5Wb65hnEExu0tXcIwBrRS0fY8maCW9eZj2RWzq9qXYMRAF/c+Xbdrb9Q==","shasum":"469202f78bd8724244e2a2916a5508205d0fec2c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0d8084ed.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM0itZ+AyXSgCbKBrs5zY2oybDD9C17nMZ27dVZdLFQwIgQAPbLOPU/+PutXoSoJowwxbzkJUT4P82TUf3xmBRxY4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0d8084ed.0_1635443105856_0.43507568215141723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.232327ee.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-P9lFUNJQaOtmX5uE7WEFdt5e5rFdD4dVGvm6J0+GFIsTlrvTfVUUIVcguyb8qGRCdRNAXMisBtiYN+JbEWusNA==","shasum":"227073f9789b568789f921df02c9299b3008a39b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.232327ee.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHT/B85SUf4nFDWDnvNO9GMSJdCNj8bcD6Q29Q7KPIjmAiEAntOmBY7Yh4Cba6n5yB/KWgGqIlq+5EhqD9II9YQ8z3Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.232327ee.0_1635797756989_0.7580012511151439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0a492ae8.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZD7xgyk6IYhLn6Tp7RPqXPM7o8xTDW5rAKnjURIyF05nZ8k4zSGq9tgxsu7jaDqSpyR1LcOU9lW06dPOofZfTQ==","shasum":"24aebd45c36926a0043b0b5efbeaeca3002159cb","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0a492ae8.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMMJhUM4WWtuSrEAabL53CqpVgAyKF3SogAXt8vSCLpAiAcFnWxM6LZ0c2KcNLOvyuYFoVK5mZE96UIZgJ2X/bNQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0a492ae8.0_1635847234835_0.8651072465372402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0aa18745.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-NZpqir87vRjwbqkiiH+vnQ6OSGjj+2c5N9XpkH5Ig1gEOVoQ5iFpi3nbH9vNeWjbU2Ds1wbD5HxkQJkGTKgQig==","shasum":"1d0940451d347ad5e7963f592b1282f9b7a90ce2","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0aa18745.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArFNjtsMtPyezMhovFU1pjvhx1IQgi8wynDQCBaIgN6AiEA/GDrbvHgGGQCc70C+fj3eoByIyproXUw4GCI3hs7/UI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0aa18745.0_1635876482446_0.4798326922667948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.f3e28323.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3R0f5mL28NoPevZlU3ZSeIteya379XXYEgj8WgP7loH6V7VCw+T/cncXcOJK1hPHOIT0qkeqyK24gYyeH34WBA==","shasum":"b7da0f00a02309eb0f6186f7896f133cfcb0e6a8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.f3e28323.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjdUT//ELtSwXKl/SA9Xl056GvrY/t+urMQrKjgYAibAiAaKjhNtJ2twrqQWREJ4o/Ih2aoyy4GCTvcmi4yn9xJTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.f3e28323.0_1635879584738_0.3757879632883505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.27e05c5d.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-nT2jPtmzkhXR46Y86EBdXBbnJFQmGZoa/STpxxAhG67rp4F0VsZOD5WgUqstnIgTqrhrMT7eRYmvWUoxdw2ZkQ==","shasum":"af8cfb0811a909d076c0794db126e4083ac05037","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.27e05c5d.0.tgz","fileCount":26,"unpackedSize":163714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUms9v4OutpFbg5cUhiLGTY32gp0De5sb9Of9nyNCF1AiEAxEg7BB1XtzImXToaNBZWPDcGhm6aP/UQ8NAYaVoS/v4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.27e05c5d.0_1635965110206_0.4952696933554839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.b9e44af7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-+ZRpEJWOkWAiqyEN7yEqcvqxMksrjCzLAgaO1mnZrNfxKKtHsH6i3taqvMzoxnXUhG8FpWTXNug6DtPT7cWQSg==","shasum":"455c169d0898f6a274bf726be526af8eeb10a7f8","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.b9e44af7.0.tgz","fileCount":26,"unpackedSize":163723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+DdoHvp5bBsrg0u2mmoqW2Avn4z2kSBL42p0G5DvMPAiAzMg4/LX6ENaX/zsiffctF1qR2NChDmni3n+tFOLXF2Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.b9e44af7.0_1635966253059_0.7108404410028673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.448f6cb9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Zr+2YjT6JnyrIxQVB8gFD2p0w3hV9DMg4WiYhhvKmXduqgpP6aR6dd2GSaqHyAKK0OZB24DH35xkRCl3vLHI8A==","shasum":"bf8231c5b70584b13a56bf5cf4c5cf5d9743044c","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.448f6cb9.0.tgz","fileCount":26,"unpackedSize":163723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4VGUDXIZ/KVyg0oAFgN7EVfPYYBmZ6il4w2VAG28LWAiBqwdpgcLZsxG7G8AjLNGT2PNgj3WM6sgBFQugPTmSOeg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.448f6cb9.0_1636049285442_0.3471770036195243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.8067ce28.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","@material/slider":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-1xHqv2jTAr3FiwVjzB0Yhx6tzVWJlRM7xwOC9ky82XS3futQN81uCpG2joh+/+FB1z2DIT6c56mo01Y+lkVaRg==","shasum":"ba7eb1ac45290f3568158cee592b064febdb5842","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.8067ce28.0.tgz","fileCount":26,"unpackedSize":163723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7+x1FsYiKlI1pvXjFpQG+wx04BmdW3hRp70zL7vhMHgIhANNldEgGEYSBTONZwNyk2BP94SzLu6CR2/wwqckWz4Py"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.8067ce28.0_1636064557746_0.4924593230609544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.345c2bb9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","@material/slider":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-WX5Swcd4Fie45kOmk4PmSh0iFLcymgjbPlqy6K8FdPyF0HiI6UWCt9LSBloxzvPkMtbj9YALhrfJuWZjrEFMLQ==","shasum":"4184bebc29c9129dfc033eb99006bc3d67065850","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.345c2bb9.0.tgz","fileCount":26,"unpackedSize":164185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4DCRA9TVsSAnZWagAAkXEP/11Gy4C1/PvCdihJ3bqC\nQOTh7CZv4Nw6jOX14Nb7gf8HxohYJYDuZuxUsSJunG2CzTLLVcSBLd15PH66\nytAQLDo9BuXkPMtt+Dc1ZGTlkNs/0YiwceFbChCqOv4KUWw1xL+K+EFW6kRK\nCyhHIA0xOlb4Bjag4tFyUlSaBA8A4Eu4pEHhMS9yGZM2iYfwf8i3GS32Zg9W\n6F6INoGKtSvHUusB4oyPopHKJ6RqPxEQU4Bn8z4fS6+NS05HV21vKqUm4WEm\nATEdKALIbKHBzrclxcDxFuhFKcU0mQKu3hqMAHJc0hKoaWqYFLnh+QHSipXH\npxB9XUGd5oq19UCRyMKHLShu/p6Qhh9G94DpCyaJLPtFJTqeIjrfXHv+Ijvd\nPrSGy4S20setkBcm2xG/2DoEZ9B4rYSAAM0v+mRbYtW6x3fvS4j9v1w+xfZA\nmiGzDOgMKZoKWVAopIGiTCDWENO95ho/cGnckHrSzSGLw7269Gnrn09o/bBU\nnKv1nkFUbCLe9KfjEYDROCDiH1pCVSSi8tYvso8LZOMcT9v+8uW9ZjADkHi9\nEyuItKc+36Ota4FrdJeWF1CnopF4kxDOG63zU8kloao0T5jSyNP960JMCaRp\n3P2udG1GTAQml1ouj6kz7DidCqTU+ACmpv9IY7xiAj8jIOI/ZBGyWzBOE/an\nSONe\r\n=VtnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUGBFMEKGZYmJgfkv+3QLcELoxqyiS1ekbaT7SdmB/twIhAJbYL3EQjady0s6dvZuQaZaH+SIIZM9Hm4YtPQqAqYb4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.345c2bb9.0_1638465027614_0.6012265169370612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0547aeeb.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","@material/slider":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-idzkCn84YHjmDd2gDBrbs0ldQfR70PG3tlEc63ju8oJNKpmBPBrIoi/YwwGM2OQ/4+inw381GNcroZISqYN5mw==","shasum":"9b818b62cb05950053eee8ca1a13fd9bce994717","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0547aeeb.0.tgz","fileCount":26,"unpackedSize":164141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwJCRA9TVsSAnZWagAAY50P/1pQwUnTNGE6XciDNYH8\nmyLoVpYujaVJlXy1a9PiUGf/faJix7WNl/CBfOgUKj55VXqtAOExWKz9RPZp\nEsvYnPdg9GUyqpE2LBesYH3VuknHs1Mn/i/R27aS4XVPvJtg9ahAhj6KyuML\n29VDZSr+YmFTLZc5PIgFZdwkBbMnwJEGWJtt6pxCFJKgcsXUjayndxfF+iam\n395MRFDkNj4OBEJxCScIuaTRSGOHPGq0CS4fHudpIP2Hw3EWdTm5fciox+Yv\nhgniiTbDrWPAbHG7LIAwF2+M2YkBQtp75Na1Qi/sKcpjk6rXx0x+rT8Hibic\nC6t2ZjVVK1OsRDaQJweJ+sk8QzAoGqeZkAjXYVNtkuRLkOfOXI50KIdFYqgN\nqP/mPkQw2PWrSR4+aDcc807CqPoz/F6dfTdfFMW0kC2FeWNtPXMna+L6oW2T\ns2BZMneV2DArHc+ayUyzPOK38frD0XtDF/61mZnK0VUJDX61V3BWtoNa5ZZZ\n2sNENCHYss4mo+f0C4NkNN58YfbA9hnBBRROYAPEFSmuLZh6hi1KcM9x29/U\ni6vkSfx5tIRyeyVv7INpphpiMORmMIbEYGupq0UbCyeVqJYB0jnKLYc7HGzk\n0RnaZ5UrQFCcAPHmRXfukHmCXWmUcBoGkZMj7p+7YIR/7sHsFJZfVZWPmp+G\n2A6Q\r\n=CuAC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDChnpxhTAfhU0l95HB+5aeyV+dmvEdGXHURKkkRw+0MQIhAMUYppUv3+MZB7h5RhvukFk9kKO+R7rE367qBF2Ycn1B"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0547aeeb.0_1638808585023_0.6187478587463455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.3b2452cc.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","@material/slider":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Ded8ZSwTX4P3U57f0LCB5vYTreuYOfplVQ4hHkG/LzcH+Ro2HxauS4csIeCO0bRKhlFCI/p03AXFgL/eKIOWKA==","shasum":"f2bc52cecbe69ee760054e75d965fe5f858ff279","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.3b2452cc.0.tgz","fileCount":26,"unpackedSize":164141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhkCRA9TVsSAnZWagAAn6oP/0WYGNefyVYFqaNRWzof\nhNriHWt3kIKF5LcFY2Qob8fLIg9aei4XOtU0c0Lgb7fUIuaMzWRNAX9sFAwM\n2CBTw58AZSo9RYZSbcFMXZp3deUm3GO47Ytjy5U625Iw+Y50omKVJw6mpKPt\nf+L29y5hAk6HRaKBiLtaof7+nHyvAmZSWriVB+GW2mq2SCCswA6hTqzTeRzi\n1De4hz4iWs5W8wAGAR6MpJAqJc3/XXXVKcl+YsBlC0lLQOYxfAmJOcPpSmT5\nSFlm4ulqvUz2Rg2mWQowZr+jOwy6Zpd229k9jSWjOv8yBBgFMGkO/yFmHrFp\nAAvl8sFK8TsMXvUPhooJDcUChr8peLyCI09vOa6LaCR6xNsMMmoO21p8s0sX\n4DRB+X3KtZk/MHANeivCg58qoGW/7xedsrqWDarhKUUAcWP8R0QkuSvSZFFw\n6ns1vGzeOxtaMqEcotehEPvq1NCRU1tnPNAH790rrIh6DWCgDciA7ImcXhbv\n0TbmYr/488y3tL3/eh+PHEjc/zkWbaDSymCLlOBbyOjRQcHooEK0Z4MiiYCK\nJ2MKp7hs4FDmqd7wV1F2th1KaHHwSOhnKFAaWf9kUak9kNBP3Y+oTUbuLWtq\neSfHIPrBxyW2NcnRktRkMHXEbRbrMJSkp+YA+MZH9kFAVD6MQpTqPF50m7lU\nSp2v\r\n=tI1s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGR4O3NOmdOy2q3SDcVd8WMGm2G9/vb+vLWbY0iqJLblAiEAmDvX6Ocpm8eg70/cIf9n+t1f3I0ZJOHNNuvdoJ08rGk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.3b2452cc.0_1639008356408_0.2871213610403185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","@material/slider":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-fFD2250SAAcg+foOkJsXF9mQfaz6URJFwtJxPDvf5CHapyramECxyZVVV3xDWmcXyLbWYHBrGLNP9LLmgzc2bA==","shasum":"b88681cd7d511aeea787a84928dad5ea6b3e6fcf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":26,"unpackedSize":164141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6ViCRA9TVsSAnZWagAA9tkP/1JeCeIEBmlTzHzyV2tG\nF4QxWYdWnD9c3dHZtB8Tf7RRHHcTyMheb84NXOZZv+mdgd3V2TBTUOMr0GJX\nF4KZQp/i0jzizb+bD9Fo5bCFw6ZrlWiwM2Fg+XwB599VpEpENLfZJY8GB04n\nMlFyhVjyLFWfPsUyuPBRGp0UASltA8pz19BrGuQe64zrT0z47HhA6ccwqYFp\nRsMwAmPs5ObpGeIsLMu5czxq/z/DjPUggKEaiXk5XKhuoi1fcUMsVdo6AERz\nmOwwc8JYbGk5dfa0/1aXPT/Ib4PMPQMobUpG7qf63fDX/t9AQ21wg0cWt5OJ\naTzsKaQE90WRcBWpPcQ32rAYa4tWUjPw5UyzasIKSoJx1ZtuxNYAiwYvpz2J\nhkL7UB4UK9B+lNHVpCNxE7cUaXR4YI+SBmHMUJB3J+YTliz+OZhC/VOFsqSA\nRZXNopeEURRxQqxk+/0HXrwKlZShUjesTxU8o5QetbtfkkFPJ5HjvBnbKE7p\nfF5DrTCSUldF8PRYOyPqCrCkpACblkbwzH6btLtvDK647wEfqyTvoIbp51D3\nIpMu+Svf+EQk5BmU3dzmngWV/d5PyqAP86yieUZje7jK29WBWpeUSYinc5hI\nJhCDDNGP+kQD62uNejwy5iISSYUwQVjMlKsilQMXojlaJiF4AxE9VN1Kv1JG\nJVSE\r\n=cIWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmP3d9lSSt2AbaQEJ1kM4Rmv32n3Uh/LEV66C5doyTpgIhAKWH3GJqs9mSJ05Ehqyx/FARgfqc+nlFjNSMR5jEb+Mu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.cf7ba5a9.0_1639163234790_0.18517533427842547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","@material/slider":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-w7aKcSK5X1SP3pH5udMh+G/jBzh8T9vShg98zFQnRIPVdJZIZ4bxgC9l9p/BDn5YFC7VKQ+V8G9x9rRKxTionA==","shasum":"e2e3f4b656c47618c08a1be9c7c3d3d87b309741","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.e1bcf14e.0.tgz","fileCount":26,"unpackedSize":164141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eACRA9TVsSAnZWagAAcqwP/j5b9a/i9YbcQvE1Yt6F\n/Ui2RzXCQ6qx8OUKYv5uvtaC3+u/bzq1Q9vEjXa6XD9jLPhaO+FiVPhiboMD\nWJrN7dP1iiT0BDebYfrjfBfr3cY+9kpK6L/HGSf4EytLTV22J0GFonPpjheu\nbUNBBQJec4/X7ae4jjso8abDMS7oNKD9gKZ5i+MMGZB2Al7SmeCb5oY/+cec\ngqhj4FaQ0bFcFgL6FnxstUIqlspmI7ck5bJB75cVNhVkM52+rSCroCT5v+27\nmQLowX3idUoqFLwjERUWn7gD6dgK7w7/WxMCgdoVgDWMTRUfTkRtlQwttWoN\neVR8DS6mCteKNBLs8Ss2xXs1NJRfyg/7e3eRS7AtiBH5Mb5uBdJVeCn4BM1s\nofVMg5bN2HPa+UDSqPlyiCrBk0j79iP5UsF2JO0mszLJfntg9lbllZzBuleF\nd5Wp8X6+VqjYn5z/D9HrF4JY8JyS2u5I7xR5oCDsr84jkUySqrMi93hFOKL4\npOe8utKPCul4RHopW+efv9bmyWLXWBgaRsiYj/nRbCw8q652YEAFzedcOtLC\n7acFE9BgKADGO2M/sKTrMykkmzkXTXtmq4NQiD+YguenT+BrOkG8uVHWDjfB\nQRDQjgUaLYvz0Hi0btfQuR2MdnZcaZX/bLXRlVjoBPEbzhPVKLS0OKARsVwx\nZv29\r\n=Q+ly\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjhSf8oePrCWH4fJM179/+b3bKkZOdNgNCymR2JrK3igIgB+AM2ySFP6MJ0oA6XsgyF+ycAlb91oi5zrkutcryxPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.e1bcf14e.0_1640724352546_0.25608829558646806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.b9d35b69.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","@material/slider":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-1Vag/1jEeIdsqFIz8Jo46QdrHlq2rbhy78/CgpSmupVQQr4iBR/17RoJBbxaGwav3O2t1ROpByHvLukJjWpTcA==","shasum":"85cc0ba10c0bff12ce0c875eaba855b8279df6f1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.b9d35b69.0.tgz","fileCount":26,"unpackedSize":169162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMMCRA9TVsSAnZWagAA2TAP/RuasrO9/JzQyiLvdOgv\n9Fn3Oj00c2OHl+70RDPFZFjZrFpOvT8RcBgoGgFKbswRmnlXy30KF+OV6KAS\n1toIbN4FKSoA74CrrBOak9nCPdaoeek1+EthU9dm66/mrBBuGGhgz2Sczag5\noyJ2EvyXWH0uAytrBpgrUj5qMcds5DHGZYfgoyUUprpoUK2QSoKPMEvk9lVn\nMke1LrIyBygziQjVGMlsKdArXkUlcjIMivQsX9q8i2yWrSJPI/k4y55PYNma\nizjmZvxZbYh3kovlUluIqgyOzlSVrybKcjyDkv1XOVjczWxI/LyFyshA7AON\n6KqZIGpK6pk/vRxtekagdij6G1rua3ve1i/Vbq1/vPPJ2LC0PcKrx5XGZHmP\naP115dL3t5I6S8n9ESYAn+6zDr96IYvpNZ3e9ntRmRTRqPhhDEf7obc0t59h\ncTAkuaGCgXjpSxwlw8fpuDtq4HUmGLx5+E28LICrHK4RvVwsk+Eb91Xv91MI\noR+orMGTxAZWxgjRflvom0agWRHk070cpikiTOjDd/Xei+2OchDvD5QZzgR1\nb66WTpuOhXYuN1eboWVTGD8q+i706da3f7vGodgWhZe0sF/j3GVNlBlXkD+9\nQjG7kiA7+QpYo+VzRYit6t8PvgLOTmvl3a7CCvKoezdxEAQxYfFV0ikVuatV\n+xBF\r\n=hW2H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3NcjDtmOjBuOaae1xhepXEZfUjoQJweVCnlpmrm10xgIhAMm2Iilr82NHojZBKKEOvP5MT48aRmdI779KTC8a5Wy0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.b9d35b69.0_1641407243970_0.25596175414495015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.2afff08e.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","@material/slider":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-At8ca+WZHgm/salUmqGWkfjs6k52b1CnVm+c+bnQcx+bc3lUZyQS+zzkEIfdO3yPxjFmzxrZIMfOIephYUWm+A==","shasum":"bf76c9350a734690d1f9a2d6d80fefed0de9e732","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.2afff08e.0.tgz","fileCount":26,"unpackedSize":169162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vMCRA9TVsSAnZWagAA3MoP/ji5jYqMDJ0+kJPrsK5p\n1QceKkHdhDQGdkf0cVFOvvvN8iHVhvLO2ilP6VTMFqvoz/n4csWXS74fGLoW\nt2tsVjbWj4lZb8mM4GR1h+aECgCDNARNOA9NSDLDfwL6URaBjHSn/2gcfUky\n46bclM/Kc4dm6Rky2qrt8OSxUTqzOp5+hHufkpMSFBORrha3I6uz3nLRkSQk\nbrehxMboecALRQq6UPkBBK8QluIxqZogb3BohxcNfhlzb+fC1CJTnwSwFhF8\nhFe1bEoBG489zdYLIbkjjCKL8trhnJ2917jXklvbVZQcBwk2CB7l8v/OFfoQ\nVaNfspaUsvPerWleDN3G0iwvA/Qyc4+R31VEpKmwPmkFptaedFto5hyjN7AD\nLA7djpzB9EhqX1tSb9yh6qY3p005CXKVT2qRKxYZfOaacNx7udWKjIpi3ts0\n94xWD1I7R6eUbE1JNpH0erBVt9XX8HUTkjungDNgcV7LWaaAN4PqlZ0dSx8x\nVO4WifYUw9/3zIqaNqxIRlvIIt3oYDlVzQdRJ2ZBbu9jwF+LHe8Ah9va3PmL\nSIF7iJjpIkn5bbnEnGC8Q3l7/kmZKmNpW31BZCmG3+zv5JXWYvuqwECvKPhG\nCqrUicYiL6evR6FgX3iAHwZZZalyOYV8JBTVdLTvGlu9HOz8MqalmiHCbE/s\n2VWi\r\n=trlc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDn0n/jMDiNprG5goDxANIwxWy8MHwnmhpZ6cEAycgXwAiEApXlUc0mxKTqfesvGi/xqt7wTdi9ElhqKSZUJ0CVxB9U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.2afff08e.0_1641507788524_0.9642266758287144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.893fc857.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","@material/slider":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-WoaNEC2KQUJEiVuJYcKGqz+BWsiUcwH8tnYl8E74VzV4qGvTeV4eY7OUipGEPLhIaxbqSifABbuOpZ/QcnRQhg==","shasum":"47cecccaf391c52b2697fe913d47bbbd75d28fcf","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.893fc857.0.tgz","fileCount":26,"unpackedSize":169162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxOCRA9TVsSAnZWagAAQNcQAJl8pQgUj/KMeC8EFjcj\nu6++F3OoFJKNqWizisuAgFeC/3smFNEY4ZFgf0lPy1xO3Oc3NFHSwy6YmG/H\ni/1T4aLc4mB7YMTFWaQM03B5MTQ99Hx/F5UTTGWQM2vGrIhlBvd4IVvHmg0s\numlr1ONp/vIX7fYy3wWC04la8B4WiP+mrmv3XZw4wzrpp3imMau4jYg9ID8b\nhq8e7QI/YJeIeN3AN2+vkEG6H7X4FmUlqPIbeeFOUWNxh6HTVfDEyhk/pnsZ\nDI99LxMVzqEUFB/b4iu09J1fO9FAfBVr5i21YkKbjSTSa5WWkT/yK48USAuM\nX2Ho9Owsgfw+P3+9iLYoLm3949Lg/NPwl52E/+3TYpcZdEox+MWVF0rLEMDi\nFoXcuQa5Ok/RGRT9D4uHArcxgkLeyleVqOTDTkmOt4VRjjcstbOY5fU4JXg1\nNQgMZmOaHA2RIbNK32n/MXbhssM5zXz+KsTn6Gb3DJfoGDecPz4FhlKK08Bq\ngaYQMEtjkMGt1cyKZDAp+UGBly6Km5ZLDcYal1WknMdoJ0JGnkAJ/DTpi/gw\nqngxXisUQ64t/+tvDvycMjXS8nsgTLvsz6aPQCDJpBLRiHqEdpUv2E3MmXgx\nE0a0OtvJwKItObkDFx7+P4qYPLJ3YLChsDmo+UhnbLUxcyCi4drRDvwvzQYn\nOeXu\r\n=SB7V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTRIA/HLQ8Pophl147ijFZ/KBgkbccF6D8Bcb4wFbs3wIgf7LsgapVeI7fbHTOuE6DuX3wFXS05RgvPruYRkxB3Ow="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.893fc857.0_1641581646433_0.9987948880870161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.69ba13b7.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","@material/slider":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-nG2BdGLSqbbknPnL4HYwA9nJUj/yJ47c8U6c44dJtHs2zQgxaCBBZllJsNfN4W8xy54nS73ETeeEv0Q9kyN5ug==","shasum":"2da81ee0b2fba57bb37417be59dd0abade3c2f7b","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.69ba13b7.0.tgz","fileCount":26,"unpackedSize":169162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+GCRA9TVsSAnZWagAANwYP/2Z2iPy+CrJIZ7UnuhTL\nSA6KE9ukHycHaRrG+XOu7rkX6hxAiep0JJtvo8Jg0pqiJuOIrAvZSxvCYKyj\n143VefwriFjtY68m0rapFsbTFqsE8Mg1Kq3rXENRKr2BCl1xWtzI6/ep91Aq\nPXEMdHD7A1Ehs6GL+HAGtbw+FbMlM0ALMiuIW6EYHjUKwiXCY591q+ed9n8K\nuJQsQQP3AHlnFyfe+bZyvlDkjh14cUodzbbDCwE4gJwo1CXjp3YsUdIQzo6t\n+huqoX+Pb/7Gz2ZsT0jDS1JwlHzAzAmb9rckWLNxwIT5F+s0vmNQpzliqOHt\nvYRYbt3KjLoxrwbJ1iEggkPxDa0cYFTBqZH0vRJ/gR+fpLD7vcg6d/OeVnpE\nzUKRxl9G3XkxJKCr4IxGYdmlJroyQqlUhBuZ8Z8Xb+eMef1kaYN1mq6V+IMD\nVQ9eFawR4RV7t/Ik+0Ug1Qy0LoBbGgDCSZGtCNHzH4GQ3AQRbtSVOPnh8+eK\nY6AbPQvvQ5beSit6teXdW7DXdwOqVlu/sIdw5h/xdr7dM82pS67kRMchVe4Y\n7a7LFPtMwpIifCCJE2piYT5cbeS/IC0VrEyVpW9tbjDSLOaG0S30diSD8lPe\nkVtQcb1liJTzKpNIQBFjez5rPN40c51uSM+jnTnNbqHVMR/goal43kMBUdXH\nn1jC\r\n=r9o8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh/v9Ql23b0uT7WtFJ/t3LWL4Iqo/qgNPqoks1F2vQBwIhAO2MQf5Y1cGJh0ViIA7OQf/OZKaY3QkO8nNSbve4sHUU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.69ba13b7.0_1642631045781_0.09545295713932012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-slider","version":"0.26.0-canary.0af8ade5.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","@material/slider":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-ZlgAGEojGvYswbaZbhZugiVukTpj/JoZkWyVfqwMa/fYm2qm2u9KdCnhnFt7VS3zUfcstT6xI/b+MjUU0sjNWg==","shasum":"6304b0de30885aad5fe671f8da6238d352c6ca9f","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0-canary.0af8ade5.0.tgz","fileCount":26,"unpackedSize":169162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZejCRA9TVsSAnZWagAAtacP/0hH27NvJIJRut0paIPg\nyXhI01YjUhO50x0BRye/2oEaIMkZZSN21zwA1PX9vdHDRCQbkjAmUeFTI2RY\nj9AsR4YS2R98M7qMQmchSz8tcirVe6nKnUf2LF4RUYdDUJu1KDRPBBwQMf+F\nerrVTI8FD/NBslaqAP/mFc6sesTrFDajoc2TnZGJPudwnKOUkcGTLgAV1e/I\nDr10kGFcSsCyHRT7rE8vgn9qrOAToz8BBSvTAmNVx2FUEsjDIVmuOyKIpMyM\nl/4K2DUx0eoum6hxrxUzwZDzTqQNVybNw2Rkf/HRSXeq5n4tR9vdxwuLp455\ngw1e/aPrPYYpSX+6EDg6z5LCypbpWAcvqDLFdacX5HvkiDV+9Wo1OyyoOwCo\nqYEW4s94DmM566/RgHSd6SHZW2dQjbBBFwf+bFhwhTeqRz5oHZEAeybb3ZOA\nW9lcbfzw6V32BerwKuqGP1z13j/ZNz6tW0Y4zK/l77BZ+LSyrmjv4uUVhSyt\nU1A3JiXjb1ra86qWvDhChFuKOWKfa6xaaHJlzRTQCX14yvb0B8rrb3Z7c+1g\nLDm1Bidq86nE96dICSdkEW/Y/8exM/iC3nn59Yrm2XN81VXhZzZk3Sv8qIho\nXZiJFzthbfnexNQ4W+jo9QT3mFXGosqwVks/ZByCBSKd6PxtnlEL9t/dP1qa\ndYQe\r\n=+Y0Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7EL7jD2C5vp9lmbybUq/Dgt5pxPffAE1U14ZPn9jFjAIhAKmEmR0mR7CBz0Av7IHfZX8/w9xYh1rIC9BIGG77lx/T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0-canary.0af8ade5.0_1644271522899_0.46287507159273633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-slider","version":"0.26.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-ripple":"^0.26.0","@material/slider":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-PUSLC1QpXYj8nBtq1zAJCq76rUSkIEs4bqqC2PWDK4AMWe1K9X5P6mrDLCH4Fpk4M10Y+nUpZjnuBknFZjFPZw==","shasum":"99606dcdfccac195d4dbbac9ee111d2cf4f99220","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.0.tgz","fileCount":26,"unpackedSize":169000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICR47dKPk5czpkdDbsaAtg7F3b0E+XYjCki+BimWLyOJAiAbmzLzmrU0fMuzC5wSLsGuTZ1IddmECFozj1w2mIGK0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmopqw/+OMcOnO+d9QZHsMNZ7WwEhayVt4Xo1ClbSDIbGwrNRc3oOCuR\r\ndj7T4Lonu1qiRxHuksqEOalPlMjGKVCMsrNqYhIa3G1HyheEu8nkr+/iRvEG\r\ni9VfmnD4wTuXgVDK9zd8U2/0ORQ1xTap4kzfaZDA5nYoeN0WqN7axqrJrslP\r\nTAQrsmeguJbbvNrhTNywFvwyYeRqO5TDng6uEjbRKC86p+vdPG/CfCxNSh0f\r\nyNdv1mOPPKIHchFX3+XhVu0soHIqsAC0s6rDfTGd7Npmqs4yaL+JjtAnXKjZ\r\nN+vN5cMxbW7GbFh3ZKMHAoA90X3XbZAxKcU9u8Q7sziC5WMntHfvcA57Xdoa\r\nC2YJp5n7W3+T8lCFcAGejrZCWz9EgUSOTc2eNSfHFrZU/8bzg+V4CqW2Dpz4\r\n2hmr4uTpiS/c6TYcOC4azDojpEGbBX1Dx3fkVhnqn3nraqPJLei/VXek2iOE\r\niD+ZDeFIM73FMgvxuau7sjliGLC+bbDQvfLMHKQI9Wt/ks6x9otetm+t5zXf\r\n1Fmm3gDZ/+DiQkkRda+blbS+ho8BHgNsL5K8rNGTOdFGwcoV4uvUcrP/EOtT\r\npvedZn6ratAoZEfvoYzmJYUnTpJQv+woaMJBWpIE/BMeXfcsYKpBlKqYCkp3\r\n33lCC0bKO6cpUrpCH+2MgZ5N0QMUAAbMz+o=\r\n=nz1C\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.0_1651599033646_0.10818601447694576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-slider","version":"0.26.1","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-ripple":"^0.26.1","@material/slider":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-YGOYCqn8Nt6NMidOFguSsTGTpThNqnMrNuDV3hs7vK4ycEU4MVw4982S+GSoPtV4Ld+/n+sLXEY4BCMPAKEi3Q==","shasum":"284fb7fbfcfa2884ab79ad77862a8c8676f956b1","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.26.1.tgz","fileCount":26,"unpackedSize":169350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFIy1u0O0HFN6rHcw3eQH4xr7qMNFiMW8iQYhbvOxq3QIgePpIs1P7/P/HnqElwzakBs7vz514YqssKqDW5Rfzj7g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLjg/+JoY2Gti5JF0QLnLyrrHBvfsjmaMQYLG9k3Sql6Lqul5fLNQm\r\n49qVTMPMQq42oS473qi6e/7p8KxaMm19ISBeVP4JEydWv6O20yXx8V3Vo2nT\r\nHIajy8CeYZ/BBNHWDrywfNykWaRVLhoB3ZuObpGv7nqL6pZdmU/P7BRUFnHg\r\nHkydmhSSi3sZK5bHTBTLEgk9haGkvhI8+Rp12gH5xC+XOeYVpiootOGflPDR\r\nRIa9mM/igghwQeuxUcuTrcsGZZzT9QdRWQc3ml9Jg2z3Quv9/6qqZuJYdceX\r\ngnpeF3t4AjJGNNeqBXKVSG5CuM6YZTXyMm7xwDoJnwPK4FKuit5RTXvf0fck\r\nuLIF+2Jd0XiKC6oBgNb26qmRYHh0Vks8ngtfw/Snh4rA1TFYjM33uW+EBRWr\r\nHYlly1SwN2UCDSQWGwrjoKPyjjv9NDVgn+tnp5SUyvtgMkp6Ql0FgjeKrJLk\r\nDIAfppeHbUJWrNt75GFCE1dPtK6xoyxnJYoWwXO1ndmj9LK3LSyf5A9ikBRo\r\nUo98r5hNt+tp/+QF6abqAiiyUbALamInmmxbYk6PlltQObtaehfRtrblG7W6\r\nxfv8pfeGCN8Q90709rLPO8CiKjCaXDHapOiM1orda/HEewEvAnY3uCOa8avw\r\n3IMdXy/2PVzytJEuQTOUVLNCmKrhtEn4GIk=\r\n=IRLZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.26.1_1652128311642_0.2530482868757722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-slider","version":"0.27.0","description":"Material Design slider web component","keywords":["material design","web components","slider"],"main":"slider.js","module":"slider.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-ripple":"^0.27.0","@material/slider":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-slider.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-slider@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-lYkxu1vKisV912dkmetkqs/YlS24fULGqKyxPGKC8zlmdN10ZsvpmC6CRIhtHoJeST0JAKunKWdEswTW3pTPaA==","shasum":"0f896f41e3f99d3557450ff326a0da2039609fd5","tarball":"https://registry.npmjs.org/@material/mwc-slider/-/mwc-slider-0.27.0.tgz","fileCount":26,"unpackedSize":169350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGurVB/etlBEF27uFR3S6u2nT6GXIH36pg2bLlfq/Sa7AiAikJRPurAJiQ8WDwI6z6UGLNYq1G/zqebReDI8TIHpSA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN+Q/9GqO/5Xdcrl+T/qiU9K+nNi8FYhGGg2SsCXBsienozyTalkie\r\nxb2djoUAOaCQ9alM+dct00Hj+QXOAOMjrprF4Kv1SS4NFyGFH0sq/9QSZlB8\r\nVQw7kbzBudNUoNGOWAeCLF2uL6s0DQJyHilWyM83C6xLGOSI23liP8ksCnac\r\n/bnJgHBnT7MPajKsVaFq/TgmfaDR2sMqI70imUQ/8zcvAOkfKt2APtf46xys\r\npNq0ZpiE1dhccD+tWDV3XGeo5tPB8IxRIM75geQkYun8OojCQa/3lppJ4Trw\r\n+bhnNyEuQC1rBMpy1KI09THbLpdlTOiuvNZKdJ9ZZPcpvjgDJzgvqy4aP1lM\r\ni1XaVEVG4rVd/0jymfN+YpVgbXYAJ/3v2rK3ohsw3GxB7e5e0po7/UiAcBvJ\r\nwsRA06GdKJfPSoRKzqgTGcRWlPrVLUkj5t6AL3772lbIYCKeUQzm//CbBPMc\r\nxVWEozfC7C4yxlA79WxbUreWPu615rk83NE6nc7t42FAL7DEqQW2d6GaxkJ5\r\nXyGJ01izaPddi1yJH8Mq7wE0pfpfeP0Hscdl8UVl9iPEVvqPUjMUmei5qqlq\r\n93fFSlbGgJYuDmPGSa68TTj0eI7vDHttxE+9UWSnG9wtYkkh9T01WUQIFHrF\r\n0hJ5NcDOqXPTAJ+gPGLV7fGwkuQDSYYkepU=\r\n=ntjW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-slider_0.27.0_1660331528797_0.28333631676658944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:13.039Z","0.6.0":"2019-06-05T22:20:13.319Z","modified":"2024-04-04T18:56:11.752Z","0.7.0":"2019-08-27T21:23:41.641Z","0.7.1":"2019-08-28T02:54:22.324Z","0.8.0":"2019-09-04T00:04:26.020Z","0.9.0":"2019-09-27T01:36:09.883Z","0.9.1":"2019-09-30T21:04:58.119Z","0.10.0":"2019-10-11T23:28:11.690Z","0.11.0":"2019-11-26T21:49:28.691Z","0.11.1":"2019-11-27T00:26:30.170Z","0.12.0":"2019-12-17T23:47:47.438Z","0.13.0":"2020-02-04T04:46:28.621Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:09.568Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:42.114Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:15.398Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:37.774Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:56.334Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:30.407Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:46.386Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:40.926Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:38.263Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:02.121Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:26.932Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:18.035Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:03.359Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:02.969Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:06.625Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:26.244Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:37.774Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:09.354Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:47.477Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:21.270Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:38.207Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:49.075Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:40.954Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:16:57.950Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:13.537Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:35.706Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:44.721Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:31.970Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:11.245Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:08.185Z","0.14.0":"2020-03-19T21:28:31.996Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:45.687Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:12:58.118Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:40.010Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:17.686Z","0.14.1":"2020-03-23T17:57:25.856Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:38.021Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:27.021Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:57.324Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:46.319Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:53.194Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:14.280Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:09.437Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:15.171Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:03.680Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:30.939Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:30.486Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:31.615Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:47.019Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:00.139Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:28.704Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:41.442Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:39.597Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:14.240Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:20.294Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:30.480Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:19.934Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:55.681Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:40.023Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:22.052Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:32.985Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:03.542Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:49.880Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:48.319Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:14.388Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:04.217Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:01.771Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:08.738Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:06.484Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:54.052Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:15.501Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:03.402Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:40.713Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:04.585Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:26.698Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:44.330Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:30.567Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:40.541Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:46.989Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:48.525Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:46.807Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:01.388Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:13:56.710Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:29.379Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:35.536Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:35.042Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:30.668Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:46.917Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:03.726Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:15.567Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:26:59.865Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:33.632Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:50.443Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:38.824Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:17.867Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:49.282Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:24.852Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:19.503Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:41.057Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:45.333Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:55.038Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:31.056Z","0.15.0":"2020-05-05T22:36:03.974Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:13.350Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:27.693Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:05.103Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:18.998Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:22.608Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:46.176Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:26.790Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:58.502Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:35.100Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:03.147Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:40.537Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:01.461Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:06.648Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:25.739Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:51:59.501Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:10.375Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:25.716Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:35.190Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:20.603Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:23.766Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:19.016Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:39.832Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:03.138Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:09.772Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:11.760Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:00.685Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:35.487Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:12.251Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:04.808Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:06.218Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:32.500Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:23.961Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:50.900Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:04.135Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:01.728Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:57.126Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:16.849Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:42.030Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:21.644Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:48:57.667Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:23.055Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:35.455Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:17.358Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:32.598Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:54.623Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:23.211Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:36.304Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:48.418Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:11.490Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:24.418Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:48.005Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:31.247Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:53.111Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:57:56.928Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:28.873Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:26.098Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:27.750Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:36.583Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:21.286Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:33.132Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:30.861Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:30.732Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:43.317Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:52.090Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:08.216Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:41.390Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:59.359Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:09.004Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:28:58.365Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:02.451Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:09.573Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:34.913Z","0.16.1":"2020-06-30T21:14:41.011Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:58.284Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:51.062Z","0.17.0":"2020-07-01T19:44:04.610Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:10.954Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:19.203Z","0.17.2":"2020-07-02T05:58:10.221Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:05.949Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:16.232Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:57.485Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:10.091Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:22.916Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:32.319Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:16.516Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:04.981Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:09.941Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:43.555Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:33.447Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:17.114Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:36.618Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:11.072Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:36.604Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:19.634Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:50.637Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:16.852Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:40.311Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:42:29.892Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:12.436Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:43.735Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:39.943Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:28.067Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:27.764Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:44.067Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:08.393Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:09.085Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:35.497Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:54.000Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:07.663Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:17.838Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:34.950Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:52.850Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:11.109Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:15.205Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:21.312Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:07.308Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:40.696Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:04.301Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:55.764Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:22.707Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:37.414Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:19.116Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:49.180Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:00.117Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:29.465Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:49.122Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:26.446Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:16.774Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:21.546Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:03.499Z","0.18.0":"2020-08-03T21:24:13.790Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:32.696Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:46.289Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:27.578Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:43.176Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:05.620Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:06.114Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:32.323Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:08.108Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:26.996Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:34.931Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:10.688Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:09.215Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:40.878Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:27.303Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:24:52.917Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:10.514Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:16.800Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:00.060Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:18.804Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:48.389Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:15.279Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:05.792Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:42.687Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:21.250Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:15:50.062Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:29.769Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:36.734Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:45.163Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:44.264Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:08.963Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:49.548Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:15.641Z","0.19.0-canary.f208201e.0":"2020-08-24T19:02:56.290Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:28.235Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:47.396Z","0.19.0-canary.34012082.0":"2020-08-27T19:47:55.712Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:11:56.190Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:50.667Z","0.19.0-canary.697e3879.0":"2020-09-02T00:12:53.543Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:17:59.715Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:18.810Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:49.135Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:10:54.915Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:15.110Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:15.177Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:33.731Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:18.554Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:44.596Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:35:57.695Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:01.359Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:26:55.793Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:15.202Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:33:56.087Z","0.19.0-canary.3babab12.0":"2020-09-11T02:36:46.694Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:48:59.030Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:12.158Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:03.642Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:11.741Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:32.910Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:48:59.829Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:29.734Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:15.688Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:20.700Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:10.217Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:27.408Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:03:52.975Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:01.351Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:06:57.217Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:07.552Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:51.852Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:52.823Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:53.856Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:33.445Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:08.223Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:39.455Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:49.473Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:07.187Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:27.178Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:17.741Z","0.19.0":"2020-10-07T22:33:13.716Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:27.172Z","0.19.1":"2020-10-08T23:05:44.132Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:44.780Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:03.611Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:54.799Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:03.633Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:33.111Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:13.110Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:09.195Z","0.20.0-canary.4773c773.0":"2020-10-16T22:33:57.386Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:41.533Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:59.719Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:33.765Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:45.923Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:50.708Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:42.572Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:15.253Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:18.044Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:16.547Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:33.161Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:28.031Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:35.375Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:33.539Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:48.548Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:47.294Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:28.200Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:10.740Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:37.460Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:18.297Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:27.671Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:52.575Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:23.451Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:41.088Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:36.539Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:18.991Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:53.002Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:19.852Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:52.853Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:04.587Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:04:56.061Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:52.605Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:29.576Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:04.948Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:51.269Z","0.20.0-canary.9755be10.0":"2020-12-03T19:24:59.206Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:24.200Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:35.336Z","0.20.0":"2020-12-03T22:28:40.513Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:33.552Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:30.974Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:41.200Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:25.481Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:23.550Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:49.351Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:25.338Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:22.511Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:13.781Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:53:57.837Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:45.515Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:44.719Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:09.139Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:40.931Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:53.576Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:32.121Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:13.368Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:00.736Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:53.869Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:09.729Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:14.113Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:00.184Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:57.376Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:32.410Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:07.028Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:19.100Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:20.265Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:14.542Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:13.302Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:09.147Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:08.979Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:29.272Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:34.390Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:56.968Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:06.535Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:44.330Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:56.728Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:06.373Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:48.545Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:17.817Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:17.090Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:08.161Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:27.836Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:43.795Z","0.21.0-canary.5160e548.0":"2021-02-05T23:50:57.485Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:19.224Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:42.764Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:44:24.013Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:35.717Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:46.140Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:02.091Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:30.958Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:44.186Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:30.039Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:08.490Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:35.748Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:38.633Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:01:57.862Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:56.423Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:37.448Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:55.382Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:50.056Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:07.714Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:02.480Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:46:38.054Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:36.674Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:05.400Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:52.169Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:49.695Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:14.976Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:14.942Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:11.202Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:50.880Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:50:54.116Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:34.956Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:25.743Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:36:58.934Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:22:57.576Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:23.491Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:04.893Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:28.699Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:28.306Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:40.102Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:31:58.843Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:03.858Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:30.171Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:16.729Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:44.109Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:16.450Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:00.837Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:44.707Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:39.353Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:20:59.637Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:35.366Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:13.997Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:04.113Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:21.576Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:47:54.885Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:02.761Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:47.082Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:54.179Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:06.999Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:44.301Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:48.789Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:02.854Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:23.060Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:29.788Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:46.497Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:06.873Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:20.305Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:11.636Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:54.798Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:32.459Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:25:59.148Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:35.327Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:05.099Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:47.931Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:42.794Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:19.993Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:51.915Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:10.985Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:02.114Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:08.866Z","0.21.0":"2021-04-30T23:58:02.235Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:04:59.171Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:54.988Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:19.681Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:22.272Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:39.581Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:02.717Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:49.135Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:39.285Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:33.835Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:00.741Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:53.306Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:11.217Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:18.567Z","0.22.0-canary.004aca62.0":"2021-05-11T18:05:58.055Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:48.452Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:19.337Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:10.833Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:06.758Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:03.856Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:55.690Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:02.809Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:35.489Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:09.821Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:43.619Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:21.868Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:08.387Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:42.843Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:54.009Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:40.599Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:39.198Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:09.680Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:25.853Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:56.086Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:02.478Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:05.038Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:07.837Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:47.542Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:43.655Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:05.782Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:48.328Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:55.004Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:57.531Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:49.316Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:46.412Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:12.834Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:51.816Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:18.853Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:47.326Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:03.582Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:34.057Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:24.963Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:15.928Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:46.378Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:46.713Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:40.424Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:16:56.554Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:20.152Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:43.032Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:04.937Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:45:56.240Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:52.676Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:11.534Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:25.844Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:27.081Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:13.172Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:34.195Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:45.968Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:19.458Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:17.691Z","0.22.0":"2021-07-14T22:31:54.071Z","0.22.1":"2021-07-14T22:52:45.189Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:43.738Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:16.373Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:22.413Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:20.026Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:43.863Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:29.821Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:42.808Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:56:56.682Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:30.903Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:49.185Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:17.560Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:46.790Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:16.245Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:19.532Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:17.112Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:21.959Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:18.338Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:37.656Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:38.452Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:46.472Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:54.488Z","0.23.0-canary.d595e030.0":"2021-07-23T20:52:56.653Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:32.038Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:10.839Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:19.058Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:21.874Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:45.043Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:38.413Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:26.369Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:06.930Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:02.774Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:01.581Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:45.016Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:57.122Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:10.010Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:46.158Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:06.129Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:48.699Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:10.041Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:14.199Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:55.537Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:19.632Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:28.843Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:15.344Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:41.344Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:35.686Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:38.526Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:29.487Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:37.353Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:40.988Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:47.567Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:32.942Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:56.171Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:20.123Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:36.950Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:10.127Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:08.473Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:16.817Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:31.851Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:10.315Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:00.828Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:17.113Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:02.920Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:51.245Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:18.012Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:46.549Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:00.602Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:28.828Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:40.722Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:53.145Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:02.984Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:38.826Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:15.403Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:59.589Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:38.794Z","0.23.0":"2021-09-13T21:35:50.623Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:23.874Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:28.012Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:34.681Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:37.207Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:11.017Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:27.651Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:08.310Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:52.973Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:29.905Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:01.317Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:53.620Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:17.587Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:57.119Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:18.813Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:04.411Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:02.941Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:56.733Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:21.112Z","0.25.1":"2021-09-21T03:12:45.431Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:18.175Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:27.256Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:58.789Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:48.417Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:19.019Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:32.156Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:42.247Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:01.573Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:00.293Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:03.744Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:27.173Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:44.047Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:25.093Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:31.600Z","0.25.2":"2021-10-11T23:18:33.455Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:39.558Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:07.048Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:47.607Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:40.294Z","0.25.3":"2021-10-21T17:55:44.568Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:39.488Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:06.041Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:57.183Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:34.984Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:02.625Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:44.950Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:10.370Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:13.218Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:05.575Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:37.921Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:27.784Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:25.214Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:56.611Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:14.967Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:52.782Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:24.093Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:08.973Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:06.756Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:05.999Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:23.048Z","0.26.0":"2022-05-03T17:30:34.139Z","0.26.1":"2022-05-09T20:31:51.851Z","0.27.0":"2022-08-12T19:12:08.916Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design slider web component","license":"Apache-2.0","readme":"# `<mwc-slider>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-slider.svg)](https://www.npmjs.com/package/@material/mwc-slider)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSliders allow users to make selections from a range of values.\n\n[Material Design Guidelines: sliders](https://material.io/design/components/sliders.html)\n\n[Demo](https://material-components.github.io/material-web/demos/slider/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-slider\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## ⚠️🚧  MWC Slider is currently under active development 🚧⚠️\n\nwork still to be done:\n\n* enabling theme custom properties\n* component testing (and any subsequent changes that result from testing)\n\n## Example usage\n\n### Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/mwc-slider.js';\n</script>\n\n<mwc-slider value=\"25\" min=\"10\" max=\"50\"></mwc-slider>\n```\n\n### Discrete\n\n```html\n<mwc-slider\n    discrete\n    withTickMarks\n    step=\"5\"\n    max=\"50\"\n    value=\"10\">\n</mwc-slider>\n```\n\n### Range Continuous\n\n```html\n<script type=\"module\">\n  import '@material/mwc-slider/slider-range.js.js';\n</script>\n\n<mwc-slider-range\n    min=\"-20\"\n    max=\"20\"\n    valueStart=\"-10\"\n    valueEnd=\"5\">\n</mwc-slider-range>\n```\n\n### Range Discrete\n\n```html\n<mwc-slider-range\n    discrete\n    withTickMarks\n    step=\"1.5\"\n    min=\"3\"\n    max=\"12\"\n    valueStart=\"4.5\"\n    valueEnd=\"9\">\n</mwc-slider-range>\n```\n\n## API\n\n### Properties/Attributes\n\n#### &lt;mwc-slider>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `value`         | `number`  | `0`     | Current value of the slider.\n| `valueEnd`      | `number`  | `0`     | Proxy of `value`.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n#### &lt;mwc-slider-range>\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `valueStart`    | `number`  | `0`     | Current value of the start thumb handle.\n| `valueEnd`      | `number`  | `0`     | Current value of the end thumb handle.\n| `min`           | `number`  | `0`     | Value representing the minimum allowed value.\n| `max`           | `number`  | `0`     | Value representing the maximum allowed value.\n| `disabled`      | `boolean` | `false` | Disables the slider, preventing interaction.\n| `step`          | `number`  | `1`     | Step for value quantization.\n| `discrete`      | `boolean` | `false` | Displays a numeric value label upon pressing the thumb which allows the user to select an exact value.\n| `withTickMarks` | `number`  | `0`     | Displays tick marks which represent predetermind values to which the user can move the slider. **NOTE:** the slider must be `discrete` to display tick marks, and to function correctly, there must be an integer amount of total steps within the range. i.e. `(max - min) % step === 0`\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `valueToValueIndicatorTransform(value: number) => string` | Override this method to transform the value of a given knob to the text that should be displayed in the value indicator of a discrete slider. Additionally, this will set the `aria-valuetext`.\n| `layout(skipUpdateUI = false) => Promise<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 pointerdown). The skipUpdateUI parameter determines whether the UI should be updated alongside the internal clientRect model.\n\n### Events\n\n| Event Name | Detail             | Description\n| ---------- | ------------------ | -----------\n| `input`    | `{value: number, thumb: Thumb}`* | Fired when the value changes due to user input. Similar to the [`input` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event), the `input` event will not fire when `value` is modified via JavaScript.\n| `change`   | `{value: number, thumb: Thumb}`* | Fired when the value changes and the user has finished interacting with the slider. Similar to the [`change` event of the native `<input type=\"range\">` element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event will not fire when `value` is modified via JavaScript.\n\n\\* `Thumb` is a TypeScript enum exported by this component with types `START` and `END`\n\n### CSS Custom Properties\n\n⚠️🚧  In Progress 🚧⚠️\n\n| Name                                     | Default | Description\n| ---------------------------------------- | ------- |------------\n\n#### Global Custom Properties\n\n⚠️🚧  In Progress and subject to change soon 🚧⚠️\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                       | Description\n| -------------------------- | -----------\n| `--mdc-theme-primary`      | Sets the color of the knob and filled track when slider is active.\n| `--mdc-theme-on-primary`   | Sets the color of the text in the pin.\n| `--mdc-theme-on-surface`   | Sets the color of the knob and filled track when slider is disabled.\n| `--mdc-typography-subtitle2-<PROPERTY>` | Styles the typography of slider's value indicators.\n\n\n## Additional references\n\n- [MDC Web sliders](https://material-components.github.io/material-components-web-catalog/#/component/slider)\n","readmeFilename":"README.md","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/slider"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"keywords":["material design","web components","slider"]}