{"id":333534,"date":"2022-05-23T15:00:56","date_gmt":"2022-05-23T15:00:56","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333534"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333534","title":{"rendered":"<span>\u0422\u0440\u0438 \u0441\u043b\u043e\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041c\u044b \u0432 \u0422\u0438\u043d\u044c\u043a\u043e\u0444\u0444 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c <a href=\"https:\/\/github.com\/Tinkoff\/taiga-ui\"><u>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Taiga UI:<\/u><\/a> \u0432 \u043d\u0435\u0439 \u0441\u043e\u0442\u043d\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u043b\u044c\u0441\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u2014\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 <a href=\"https:\/\/taiga-ui.dev\/components\/slider\"><u>Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Slider<\/u><\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432\u00a0 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c\u00a0Javascript. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c, \u043d\u0435\u043c\u043d\u043e\u0433\u043e CSS-\u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0435\u0439 \u0438 \u0434\u0430\u0436\u0435 \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043f\u0440\u043e Change Detection \u0432 Angular.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f0\/cd4\/106\/4f0cd41065d5dff4eb67a1f9061c40df.png\" width=\"1561\" height=\"881\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4f0\/cd4\/106\/4f0cd41065d5dff4eb67a1f9061c40df.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f<\/h2>\n<p>\u041d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0438\u0437 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u0418\u043d\u043f\u0443\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0431\u0435\u0433\u0443\u043d\u043e\u043a, \u0438\u043b\u0438 thumb<\/strong> \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u043f\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u0434\u043e\u0440\u043e\u0436\u043a\u0430, \u0438\u043b\u0438 track <\/strong>\u2014 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u0432\u0438\u0433\u0430\u044e\u0442 \u0431\u0435\u0433\u0443\u043d\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/343\/8a0\/ed1\/3438a0ed1a18835df442b7d3c94c6ccc.png\" alt=\"\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Slider \u0432 Chrome\" title=\"\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Slider \u0432 Chrome\" width=\"2574\" height=\"336\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/343\/8a0\/ed1\/3438a0ed1a18835df442b7d3c94c6ccc.png\"\/><figcaption>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Slider \u0432 Chrome<\/figcaption><\/figure>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0421\u043b\u0435\u0434\u0438, \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 MouseMove\/TouchMove, \u0441\u0434\u0432\u0438\u0433\u0430\u0439 \u0442\u0443\u0434\u0430 \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0439 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0438 \u043d\u0435 \u043f\u043e\u0441\u0432\u044f\u0449\u0430\u0442\u044c \u044d\u0442\u043e\u043c\u0443 \u0446\u0435\u043b\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e. \u0418 \u0442\u0443\u0442 \u0432 \u0438\u0433\u0440\u0443 \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u043e, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c. \u041d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f W3C.\u00a0<\/p>\n<p>W3C \u2014 \u0432\u0441\u0435\u043c\u0438\u0440\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0415\u0435 \u0446\u0435\u043b\u044c \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0431 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e. <\/p>\n<p>\u0417\u0432\u0443\u0447\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0430\u0439\u0442 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u0442\u0430\u043c \u043f\u043e\u043f\u0430\u043f. \u041a\u0430\u043a\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0432\u0430\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e? Esc. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0431\u0440\u043e\u0441\u043e\u0432\u0435\u0441\u0442\u043d\u043e \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043f\u0430\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443. <\/p>\n<p>\u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442. \u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f W3C. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442 <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/slider\/\"><u>W3C \u043f\u0440\u043e Slider:<\/u><\/a><\/p>\n<p><strong>\u041a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f.<\/strong> \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438 \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e\/\u0432\u043b\u0435\u0432\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\/\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u043e\u0434\u0438\u043d \u0448\u0430\u0433. \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 Home\/End \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438\u043b\u0438 \u043a\u043e\u043d\u0435\u0446 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0410 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448 Page Up \/ Page Down: \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e, \u0447\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0448\u0430\u0433 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u043e\u0434 \u0432\u043e\u0441\u0435\u043c\u044c \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c.<\/strong> \u0421\u0430\u0439\u0442\u043e\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u044e\u0434\u0438 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043c\u044b\u0448\u0438. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u044e\u0449\u0438\u0435 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a\u0438\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441\u0430\u0439\u0442 \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d.\u00a0<\/p>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0443:<\/p>\n<ul>\n<li>\n<p>\u0411\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043e\u0431\u044f\u0437\u0430\u043d \u0438\u043c\u0435\u0442\u044c <code>role=\"slider\"<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d <code>aria-valuenow<\/code>, \u0440\u0430\u0432\u043d\u044b\u0439 \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>aria-valuemin<\/code>\/<code>aria-valuemax<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\/\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438, \u0442\u043e \u043e\u043d \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c <code>aria-valuetext<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438: \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u043d\u0435\u0439 \u043d\u0435\u0434\u0435\u043b\u0438 (\u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043e \u0441\u0435\u0434\u044c\u043c\u043e\u0433\u043e), \u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0435\u0449\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e <code>aria-label<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0445\u043b\u043e\u043f\u043e\u0442. \u0410 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 UI-Kit-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a input-\u043f\u0440\u043e\u043f\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p><strong>\u0423 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0433\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/strong> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0435\u043b\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b. \u0410 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e 0,0001.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0433\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430. \u041d\u043e \u0437\u0430 \u0432\u0430\u0441 \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440. <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 <code>&lt;input type=\"range\"\u00a0\/><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432. \u0414\u0443\u043c\u0430\u044e, \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0434\u0430 \u0435\u0449\u0435 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<blockquote>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434 Angular. \u041d\u043e JS-\u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u044b \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u0442\u0435 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/blockquote>\n<h2>\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f &lt;input\u00a0type=&#187;range&#187;\u00a0\/><\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 shadow DOM, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u0433 <code>&lt;input type=\"range\" \/><\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043c\u0435\u0435\u0442 \u0435\u0449\u0435 \u0442\u0435\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0413\u0434\u0435-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u043e\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441 \u0442\u0440\u0435\u043c\u044f <code>div<\/code>-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u0430 \u0433\u0434\u0435-\u0442\u043e \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041d\u043e \u0441\u0443\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430: \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0434\u043e\u0440\u043e\u0436\u043a\u043e\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0431\u0435\u0433\u0443\u043d\u043a\u043e\u043c. \u041f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u0438\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c.<\/p>\n<blockquote>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a HTML-\u0442\u0435\u0433\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>&lt;input\u00a0\/><\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043e\u043f\u0438\u0440\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 DOM, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>input[type=\"range\"]\u00a0>\u00a0div<\/code>). \u0412\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 shadow DOM \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438\u0437\u0432\u043d\u0435. \u041d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 API (\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b), \u043a\u0430\u043a \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432.<\/p>\n<\/blockquote>\n<p>\u0412\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 WebKit\/Blink-\u0434\u0432\u0438\u0436\u043e\u043a (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Safari \u0438 Chrome), \u0438\u043c\u0435\u044e\u0442 \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0430\u0442\u043e\u043c\u0438\u044e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/42c\/459\/0e3\/42c4590e3a6d5bc9f973469ac34fb2bd.png\" width=\"2566\" height=\"808\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/42c\/459\/0e3\/42c4590e3a6d5bc9f973469ac34fb2bd.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410 Mozilla \u0434\u0430\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438: \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u0438\u043c\u043e \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u0433, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0448\u043a\u0430\u043b\u0443 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 (progress).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/59d\/ecf\/608\/59decf608cac5ce159bd792ca4e3ea66.png\" width=\"1296\" height=\"326\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/59d\/ecf\/608\/59decf608cac5ce159bd792ca4e3ea66.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440. \u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0433\u0438 \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043a\u0430\u043a \u0441 \u043d\u0438\u043c\u0438 \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 <\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0434\u0438\u043c <a href=\"https:\/\/lesscss.org\/features\/#variables-feature\"><u>less-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/u><\/a> \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"css\">@thumb-diameter: 1rem; @thumb-color: orange;  @track-height: 0.125rem; @track-color: lightgray; @track-border-radius: 0.625rem;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c <a href=\"https:\/\/lesscss.org\/features\/#mixins-feature\"><u>less-\u043c\u0438\u043a\u0441\u0438\u043d<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041f\u043e\u043a\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043d\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0433\u043b\u0430\u0432\u0430\u0445 \u043c\u044b \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c.<\/p>\n<pre><code class=\"css\">.customize-track() {   height: @track-height;   border-radius: @track-border-radius;   background-color: @track-color; }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430:<\/p>\n<pre><code class=\"css\">.customize-thumb() {   \/* Clear browser default customization *\/   appearance: none;   border: none;   \/* _________ *\/    background-color: @thumb-color;   height: @thumb-diameter;   width: @thumb-diameter;   border-radius: 50%;    :not(:disabled)&amp; {   cursor: ew-resize;   }    :focus-visible&amp; {   box-shadow: 0 0 0 2px inset rgba(51, 51, 51, 0.64);   } }<\/code><\/pre>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b <code>&amp;<\/code>, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/lesscss.org\/features\/#parent-selectors-feature\">\u0440\u0430\u0437\u0434\u0435\u043b\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\u00a0\u043f\u043e\u00a0less<\/a>.<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f webkit-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. Webkit-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435\/\u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442, \u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">\/* Vertically centers thumb on the track (webkit only) *\/ .vertically-align-thumb() {   margin-top: (@track-height \/ 2) - (@thumb-diameter \/ 2); }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u043d\u043e \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043d\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;input\u00a0type=\"range\"\u00a0\/><\/code>.\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <a href=\"https:\/\/angular.io\/guide\/accessibility#augmenting-native-elements\"><u>\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/u><\/a> \u0412 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Taiga\u00a0UI \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u041e\u0431 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/589735\/\"><u>\u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b.<\/u><\/a><\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 OnPush-\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441 \u043d\u0435\u0439 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0435\u044e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043c\u043e\u0435\u0433\u043e \u043a\u043e\u043b\u043b\u0435\u0433\u0438:<\/p>\n<div class=\"embed_link embed_layout-right\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ca\/584\/47a\/5ca58447ad4d4ca8e8f3dae4412b46cb.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>OnPush \u2014 \u0432\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 Default<\/span><\/div>\n<div class=\"embed__caption-description\">\u0412 Angular \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 change detection: Default \u0438 OnPush. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441&#8230;<\/div>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/581378\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">habr.com<\/a><\/div>\n<\/div>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 Typescript-\u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0435:<\/p>\n<pre><code class=\"dart\">import {   ChangeDetectionStrategy,   Component, } from '@angular\/core';  @Component({   selector: 'input[type=range][tuiSlider]',   template: ``,   styleUrls: ['.\/slider.style.less'],   changeDetection: ChangeDetectionStrategy.OnPush, }) export class SliderComponent {}<\/code><\/pre>\n<blockquote>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0438\u043d\u043f\u0443\u0442\u0430 (type=&#187;range&#187;). \u0415\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0438 \u0441\u0430\u043c\u0438\u043c \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0447\u0435\u0440\u0435\u0437 <code>host<\/code> \u0432 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e <a href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/packages\/forms\/src\/directives\/range_value_accessor.ts#L45\"><u>controlValueAccessor\u00a0\u043e\u0442\u00a0\u043a\u043e\u043c\u0430\u043d\u0434\u044b\u00a0Angular<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>input[type=range]<\/code>.<\/p>\n<\/blockquote>\n<p>\u0412 Less-\u0444\u0430\u0439\u043b\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u043d\u0430 <code>:host<\/code>-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;input\u00a0type=\"range\"\u00a0\/><\/code>).<\/p>\n<pre><code class=\"css\">:host {   \/* Clear browser default customization *\/   appearance: none;   background-color: transparent;   outline: none;   \/* _________ *\/     display: block;   cursor: pointer;   width: 100%;   height: @track-height;   \/* To catch click events nearby THIN input's track *\/   padding: 0.4375rem 0;     &amp;:disabled {     opacity: 0.56;     cursor: auto;   }    &amp;::-webkit-slider-runnable-track {     .customize-track();   }     &amp;::-moz-range-track {     .customize-track();   }     &amp;::-webkit-slider-thumb {     .customize-thumb();     .vertically-align-thumb();   }     &amp;::-moz-range-thumb {     .customize-thumb();   }     &amp;::-moz-range-progress {     background: @thumb-color;     border-radius: @track-border-radius 0 0 @track-border-radius;   } } <\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438\u0441\u044c.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0448\u043a\u0430\u043b\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 Webkit<\/h2>\n<p>Mozilla \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0430\u0441\u044c \u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u043a\u0430\u043b\u0443 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u2014 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>moz-range-progress<\/code>. \u041d\u043e \u0443\u0432\u044b, \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0442 \u0434\u043b\u044f WebKit\/Blink-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0440\u0435\u0448\u0430\u044e\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/linear-gradient\"><u>\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435\u00a0\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b.<\/u><\/a><\/p>\n<p>\u0420\u0430\u043d\u0435\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u043b\u0438 \u0432\u0441\u044e \u0434\u043e\u0440\u043e\u0436\u043a\u0443 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0432 \u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0448\u043a\u0430\u043b\u044b \u0432 \u0446\u0432\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0430 \u043e\u0441\u0442\u0430\u0432\u0448\u0443\u044e\u0441\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0435\u0440\u043e\u0439.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0432 \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\"><u>\u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e<\/u><\/a> <code>--slider-fill-percentage<\/code>: <\/p>\n<pre><code class=\"dart\">\/\/ ... export class SliderComponent {   get min(): number {     return Number(this.elementRef.nativeElement.min) || 0;   }      get max(): number {     return Number(this.elementRef.nativeElement.max || 100);   }    get value(): number {     return Number(this.elementRef.nativeElement.value) || 0;   }    @HostBinding('style.--slider-fill-percentage.%')   get valuePercentage(): number {     return (100 * (this.value - this.min)) \/ (this.max - this.min) || 0;   }    constructor(     @Inject(ElementRef)     private readonly elementRef: ElementRef&lt;HTMLInputElement>   ) {} }<\/code><\/pre>\n<p>\u041c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d <code>customize-track<\/code>:<\/p>\n<pre><code class=\"css\">.customize-track(@progress-filling: false) {   height: @track-height;   border-radius: @track-border-radius;    @filling-progress-gradient: linear-gradient(     to right,     @thumb-color 0 var(--slider-fill-percentage),     @track-color var(--slider-fill-percentage) 100%   );     &amp; when (@progress-filling = true) {     background: @filling-progress-gradient;   }    &amp; when (@progress-filling = false) {     background: @track-color;   } }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438:<\/p>\n<pre><code class=\"xml\">&lt;input type=\"range\" tuiSlider value=\"30\" \/><\/code><\/pre>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>changeDetectionStrategy.OnPush<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e, \u0447\u0442\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>--slider-fill-percentage<\/code> \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u0430\u0442\u044c Angular, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0414\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLElement\/input_event\"><u>InputEvent.<\/u><\/a> \u0412\u0435\u0448\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"dart\">@Component({  selector: 'input[type=range][tuiSlider]',  template: '',  styleUrls: ['.\/slider.style.less'],  host: {    '(input)': '0',  },  changeDetection: ChangeDetectionStrategy.OnPush, }) export class SliderComponent {   \/\/ ... }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>--slider-fill-percentage<\/code>.<\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043c\u0435\u043d\u044c\u0448\u0435, \u0438 \u0441 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c ticks \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442<\/h2>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n<pre><code class=\"xml\">&lt;input type=\"range\" tuiSlider min=\"0\" max=\"100\" step=\"20\"\/><\/code><\/pre>\n<p>\u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u0440\u0430\u0442\u043d\u043e\u0435 20. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435, \u0438\u043b\u0438, \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u044f\u0442\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u0435\u0439\u0441\u0430 \u2014 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <abbr title=\"\u00abticks\u00bb\" type=\"abbr\">\u043e\u0442\u043c\u0435\u0442\u043a\u0438\/\u0447\u0435\u0440\u0442\u043e\u0447\u043a\u0438<\/abbr> \u043d\u0430 \u0434\u043e\u0440\u043e\u0436\u043a\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f4f\/29f\/471\/f4f29f471b4431b4fa1cc578886eafda.png\" width=\"1660\" height=\"86\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f4f\/29f\/471\/f4f29f471b4431b4fa1cc578886eafda.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\/\u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043d\u043f\u0443\u0442\u0430. \u041d\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e webkit-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442.  \u0415\u0449\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043c\u0435\u0442\u043a\u0438 \u0432\u043d\u043e\u0432\u044c \u0447\u0435\u0440\u0435\u0437 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u043d\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u043d\u0430 <code>background<\/code>-\u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0443\u0436\u0435 \u043d\u0430\u043a\u0438\u043d\u0443\u043b\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 (\u0442\u043e \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0443\u0436\u0435 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0437\u0430\u043d\u044f\u0442\u043e).<\/p>\n<p>\u0412\u044b\u0445\u043e\u0434 \u0435\u0441\u0442\u044c: \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/repeating-linear-gradient\"><u>repeating-linear-gradient<\/u><\/a> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0438 \u043d\u0430\u043d\u0435\u0441\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0432\u0435\u0440\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e.<\/p>\n<p>\u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<pre><code class=\"dart\">\/\/ ... export class SliderComponent {   @Input()   segments = 1;      \/\/...    @HostBinding('style.--slider-segment-width.%')   get segmentWidth(): number {     return 100 \/ Math.max(1, this.segments);   } }<\/code><\/pre>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043d\u043f\u0443\u0442-\u043f\u0440\u043e\u043f\u0435\u0440\u0442\u0438 <code>segments<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0434\u043e\u0440\u043e\u0436\u043a\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0410 \u043d\u043e\u0432\u044b\u0439 \u0433\u0435\u0442\u0442\u0435\u0440 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u2014 \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 \u043e\u0431\u0449\u0435\u0439 \u0434\u043b\u0438\u043d\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>--slider-segment-width<\/code>.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0441\u0438\u043d <code>.customize-track()<\/code>. \u0427\u0442\u043e\u0431\u044b \u043d\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0444\u043e\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>background-image<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">@top-layer: linear-gradient(...) @middle-layer: repeating-linear-gradient(...) @bottom-layer: linear-gradient(...)  background-image: @top-layer, @middle-layer, @bottom-layer;<\/code><\/pre>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/38f\/c5b\/663\/38fc5b6635e724e606665c797ec725f9.png\" alt=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430\" title=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430\" width=\"2266\" height=\"1162\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/38f\/c5b\/663\/38fc5b6635e724e606665c797ec725f9.png\"\/><figcaption>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430<\/figcaption><\/figure>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f, \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u0421\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445, \u0430 \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0438\u0436\u043d\u0438\u043c \u0441\u043b\u043e\u0435\u043c \u0444\u043e\u043d\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0435\u0432 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u043d\u0446\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background-*<\/code> \u0438\u043c\u0435\u044e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u0435\u0432, \u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u2014 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0447\u0442\u043e \u0438 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>background-image<\/code>, \u0437\u0430\u0434\u0430\u0432\u0430\u044f \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f.<\/p>\n<p>\u041c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 <code>customize-track<\/code>:<\/p>\n<pre><code class=\"css\">@ticks-thickness: 0.25rem; @tick-color: darkgrey;  .customize-track(@progress-filling: false) {   height: @track-height;   border-radius: @track-border-radius;    @first-tick-offset: ((@thumb-diameter - @ticks-thickness) \/ 2);   @ticks-background-size: calc(100% - @thumb-diameter);      @hide-first-tick: linear-gradient(     to right,     @thumb-color 0px (@first-tick-offset + @ticks-thickness),     transparent @ticks-thickness   );    @ticks-gradient: repeating-linear-gradient(     to right,     @tick-color 0 @ticks-thickness,     transparent 0 var(--slider-segment-width)   );    @filling-progress-gradient: linear-gradient(     to right,     @thumb-color var(--slider-fill-percentage),     transparent var(--slider-fill-percentage)   );    background-repeat: no-repeat;   background-color: @track-color;    &amp; when (@progress-filling = true) {     background-image:       @hide-first-tick,       @ticks-gradient,       @filling-progress-gradient;     background-position-x: 0, @first-tick-offset, 0;     background-size: @ticks-background-size, @ticks-background-size, auto;   }    &amp; when (@progress-filling = false) {     background-image: @hide-first-tick, @ticks-gradient;     background-position-x: 0, @first-tick-offset;     background-size: @ticks-background-size;  } }<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432: \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u0432 \u0441\u0430\u043c\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\/\u043a\u043e\u043d\u0435\u0446 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043e\u043d \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0446\u0430 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043d\u0435 \u0441\u0432\u043e\u0438\u043c \u0446\u0435\u043d\u0442\u0440\u043e\u043c, \u0430 \u043a\u0440\u0430\u0435\u0448\u043a\u043e\u043c. \u0422\u043e \u0435\u0441\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0430\u043c\u0430\u044f \u043f\u0435\u0440\u0432\u0430\u044f <abbr title=\"tick\" type=\"abbr\">\u043e\u0442\u043c\u0435\u0442\u043a\u0430<\/abbr> \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438, \u0430 \u0441\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0435\u0439 \u0431\u044b\u0442\u044c \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 (\u043a\u043e\u0433\u0434\u0430 \u0442\u043e\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043b\u0435\u0432\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u043c\u0435\u0442\u043a\u0438.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u043e\u0435\u0432 \u0443 <code>background-image<\/code> \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0434\u0430\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>background-color<\/code>. \u041b\u043e\u0433\u0438\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f: <code>background-color<\/code> \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e, \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e, \u0441\u043b\u043e\u044f. \u0412\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0440\u043e\u0436\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0438 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u043b\u043e\u0435\u0432, \u043e\u043a\u0440\u0430\u0441\u0438\u0442\u0441\u044f \u0432 \u0446\u0432\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435. \u0422\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432.<\/p>\n<h2>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432 \u043e\u0434\u043d\u043e\u043c <a href=\"https:\/\/stackblitz.com\/edit\/ng-slider?file=src\/slider\/slider.component.ts\"><u>StackBlitz-\u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/u><\/a> <a href=\"https:\/\/github.com\/Tinkoff\/taiga-ui\"><u>\u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Taiga UI<\/u><\/a> \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f\u043c\u0438. <a href=\"https:\/\/taiga-ui.dev\/components\/slider\"><u>\u041d\u0430 \u0432\u0438\u0442\u0440\u0438\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Slider<\/u><\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>\u041e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044f\u0441\u044c \u043e\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0432\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442\u0435 \u0441\u0432\u043e\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438. \u041d\u0435 \u0437\u0440\u044f \u043e\u0434\u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0443\u0434\u0440\u043e\u0441\u0442\u044c \u0433\u043b\u0430\u0441\u0438\u0442: \u043b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u0434 \u2014 \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d. <\/p>\n<p>\u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c \u0438 \u0438\u0434\u0435\u044f\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. <\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/667254\/\"> https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/667254\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041c\u044b \u0432 \u0422\u0438\u043d\u044c\u043a\u043e\u0444\u0444 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c <a href=\"https:\/\/github.com\/Tinkoff\/taiga-ui\"><u>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Taiga UI:<\/u><\/a> \u0432 \u043d\u0435\u0439 \u0441\u043e\u0442\u043d\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u043b\u044c\u0441\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u2014\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 <a href=\"https:\/\/taiga-ui.dev\/components\/slider\"><u>Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Slider<\/u><\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432\u00a0 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c\u00a0Javascript. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c, \u043d\u0435\u043c\u043d\u043e\u0433\u043e CSS-\u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0435\u0439 \u0438 \u0434\u0430\u0436\u0435 \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043f\u0440\u043e Change Detection \u0432 Angular.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f<\/h2>\n<p>\u041d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0438\u0437 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u0418\u043d\u043f\u0443\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0431\u0435\u0433\u0443\u043d\u043e\u043a, \u0438\u043b\u0438 thumb<\/strong> \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u043f\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><strong>\u0434\u043e\u0440\u043e\u0436\u043a\u0430, \u0438\u043b\u0438 track <\/strong>\u2014 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u0432\u0438\u0433\u0430\u044e\u0442 \u0431\u0435\u0433\u0443\u043d\u043e\u043a.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Slider \u0432 Chrome<\/figcaption><\/figure>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0421\u043b\u0435\u0434\u0438, \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 MouseMove\/TouchMove, \u0441\u0434\u0432\u0438\u0433\u0430\u0439 \u0442\u0443\u0434\u0430 \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0439 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0438 \u043d\u0435 \u043f\u043e\u0441\u0432\u044f\u0449\u0430\u0442\u044c \u044d\u0442\u043e\u043c\u0443 \u0446\u0435\u043b\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e. \u0418 \u0442\u0443\u0442 \u0432 \u0438\u0433\u0440\u0443 \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u043e, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c. \u041d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f W3C.\u00a0<\/p>\n<p>W3C \u2014 \u0432\u0441\u0435\u043c\u0438\u0440\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0415\u0435 \u0446\u0435\u043b\u044c \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0431 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e. <\/p>\n<p>\u0417\u0432\u0443\u0447\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0430\u0439\u0442 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u0442\u0430\u043c \u043f\u043e\u043f\u0430\u043f. \u041a\u0430\u043a\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0432\u0430\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e? Esc. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0431\u0440\u043e\u0441\u043e\u0432\u0435\u0441\u0442\u043d\u043e \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043f\u0430\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443. <\/p>\n<p>\u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442. \u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f W3C. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442 <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/slider\/\"><u>W3C \u043f\u0440\u043e Slider:<\/u><\/a><\/p>\n<p><strong>\u041a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f.<\/strong> \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438 \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e\/\u0432\u043b\u0435\u0432\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\/\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u043e\u0434\u0438\u043d \u0448\u0430\u0433. \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 Home\/End \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438\u043b\u0438 \u043a\u043e\u043d\u0435\u0446 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0410 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448 Page Up \/ Page Down: \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e, \u0447\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430 \u0448\u0430\u0433 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u043e\u0434 \u0432\u043e\u0441\u0435\u043c\u044c \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c.<\/strong> \u0421\u0430\u0439\u0442\u043e\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u044e\u0434\u0438 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043c\u044b\u0448\u0438. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u044e\u0449\u0438\u0435 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a\u0438\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441\u0430\u0439\u0442 \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0447\u0435\u043d.\u00a0<\/p>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0443:<\/p>\n<ul>\n<li>\n<p>\u0411\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043e\u0431\u044f\u0437\u0430\u043d \u0438\u043c\u0435\u0442\u044c <code>role=\"slider\"<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d <code>aria-valuenow<\/code>, \u0440\u0430\u0432\u043d\u044b\u0439 \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>aria-valuemin<\/code>\/<code>aria-valuemax<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\/\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438, \u0442\u043e \u043e\u043d \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c <code>aria-valuetext<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438: \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u043d\u0435\u0439 \u043d\u0435\u0434\u0435\u043b\u0438 (\u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043e \u0441\u0435\u0434\u044c\u043c\u043e\u0433\u043e), \u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0435\u0449\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e <code>aria-label<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0445\u043b\u043e\u043f\u043e\u0442. \u0410 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 UI-Kit-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a input-\u043f\u0440\u043e\u043f\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p><strong>\u0423 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0433\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430.<\/strong> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0435\u043b\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b. \u0410 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e 0,0001.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0433\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430. \u041d\u043e \u0437\u0430 \u0432\u0430\u0441 \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440. <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 <code>&lt;input type=\"range\"\u00a0\/><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432. \u0414\u0443\u043c\u0430\u044e, \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0434\u0430 \u0435\u0449\u0435 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<blockquote>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434 Angular. \u041d\u043e JS-\u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u044b \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u0442\u0435 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/blockquote>\n<h2>\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f &lt;input\u00a0type=&#187;range&#187;\u00a0\/><\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 shadow DOM, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u0433 <code>&lt;input type=\"range\" \/><\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043c\u0435\u0435\u0442 \u0435\u0449\u0435 \u0442\u0435\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0413\u0434\u0435-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u043e\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441 \u0442\u0440\u0435\u043c\u044f <code>div<\/code>-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u0430 \u0433\u0434\u0435-\u0442\u043e \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041d\u043e \u0441\u0443\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430: \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0434\u043e\u0440\u043e\u0436\u043a\u043e\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0431\u0435\u0433\u0443\u043d\u043a\u043e\u043c. \u041f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u0438\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c.<\/p>\n<blockquote>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a HTML-\u0442\u0435\u0433\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>&lt;input\u00a0\/><\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043e\u043f\u0438\u0440\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 DOM, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>input[type=\"range\"]\u00a0>\u00a0div<\/code>). \u0412\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 shadow DOM \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438\u0437\u0432\u043d\u0435. \u041d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 API (\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b), \u043a\u0430\u043a \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432.<\/p>\n<\/blockquote>\n<p>\u0412\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 WebKit\/Blink-\u0434\u0432\u0438\u0436\u043e\u043a (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Safari \u0438 Chrome), \u0438\u043c\u0435\u044e\u0442 \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0430\u0442\u043e\u043c\u0438\u044e:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0410 Mozilla \u0434\u0430\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438: \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u0438\u043c\u043e \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u0433, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0448\u043a\u0430\u043b\u0443 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 (progress).<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440. \u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0433\u0438 \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043a\u0430\u043a \u0441 \u043d\u0438\u043c\u0438 \u0431\u043e\u0440\u043e\u0442\u044c\u0441\u044f.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 <\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0434\u0438\u043c <a href=\"https:\/\/lesscss.org\/features\/#variables-feature\"><u>less-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/u><\/a> \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"css\">@thumb-diameter: 1rem; @thumb-color: orange;  @track-height: 0.125rem; @track-color: lightgray; @track-border-radius: 0.625rem;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c <a href=\"https:\/\/lesscss.org\/features\/#mixins-feature\"><u>less-\u043c\u0438\u043a\u0441\u0438\u043d<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041f\u043e\u043a\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043d\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0433\u043b\u0430\u0432\u0430\u0445 \u043c\u044b \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c.<\/p>\n<pre><code class=\"css\">.customize-track() {   height: @track-height;   border-radius: @track-border-radius;   background-color: @track-color; }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0435\u0433\u0443\u043d\u043a\u0430 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430:<\/p>\n<pre><code class=\"css\">.customize-thumb() {   \/* Clear browser default customization *\/   appearance: none;   border: none;   \/* _________ *\/    background-color: @thumb-color;   height: @thumb-diameter;   width: @thumb-diameter;   border-radius: 50%;    :not(:disabled)&amp; {   cursor: ew-resize;   }    :focus-visible&amp; {   box-shadow: 0 0 0 2px inset rgba(51, 51, 51, 0.64);   } }<\/code><\/pre>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b <code>&amp;<\/code>, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/lesscss.org\/features\/#parent-selectors-feature\">\u0440\u0430\u0437\u0434\u0435\u043b\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\u00a0\u043f\u043e\u00a0less<\/a>.<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f webkit-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. Webkit-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0433\u0443\u043d\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435\/\u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442, \u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">\/* Vertically centers thumb on the track (webkit only) *\/ .vertically-align-thumb() {   margin-top: (@track-height \/ 2) - (@thumb-diameter \/ 2); }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u043d\u043e \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043d\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;input\u00a0type=\"range\"\u00a0\/><\/code>.\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <a href=\"https:\/\/angular.io\/guide\/accessibility#augmenting-native-elements\"><u>\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/u><\/a> \u0412 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Taiga\u00a0UI \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u041e\u0431 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/589735\/\"><u>\u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b.<\/u><\/a><\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 OnPush-\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441 \u043d\u0435\u0439 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0435\u044e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043c\u043e\u0435\u0433\u043e \u043a\u043e\u043b\u043b\u0435\u0433\u0438:<\/p>\n<div class=\"embed_link embed_layout-right\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ca\/584\/47a\/5ca58447ad4d4ca8e8f3dae4412b46cb.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>OnPush \u2014 \u0432\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 Default<\/span><\/div>\n<div class=\"embed__caption-description\">\u0412 Angular \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 change detection: Default \u0438 OnPush. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441&#8230;<\/div>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/581378\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">habr.com<\/a><\/div>\n<\/div>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 Typescript-\u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0435:<\/p>\n<pre><code class=\"dart\">import {   ChangeDetectionStrategy,   Component, } from '@angular\/core';  @Component({   selector: 'input[type=range][tuiSlider]',   template: ``,   styleUrls: ['.\/slider.style.less'],   changeDetection: ChangeDetectionStrategy.OnPush, }) export class SliderComponent {}<\/code><\/pre>\n<blockquote>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0438\u043d\u043f\u0443\u0442\u0430 (type=&#187;range&#187;). \u0415\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0438 \u0441\u0430\u043c\u0438\u043c \u043d\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0447\u0435\u0440\u0435\u0437 <code>host<\/code> \u0432 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e <a href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/packages\/forms\/src\/directives\/range_value_accessor.ts#L45\"><u>controlValueAccessor\u00a0\u043e\u0442\u00a0\u043a\u043e\u043c\u0430\u043d\u0434\u044b\u00a0Angular<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>input[type=range]<\/code>.<\/p>\n<\/blockquote>\n<p>\u0412 Less-\u0444\u0430\u0439\u043b\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u043d\u0430 <code>:host<\/code>-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;input\u00a0type=\"range\"\u00a0\/><\/code>).<\/p>\n<pre><code class=\"css\">:host {   \/* Clear browser default customization *\/   appearance: none;   background-color: transparent;   outline: none;   \/* _________ *\/     display: block;   cursor: pointer;   width: 100%;   height: @track-height;   \/* To catch click events nearby THIN input's track *\/   padding: 0.4375rem 0;     &amp;:disabled {     opacity: 0.56;     cursor: auto;   }    &amp;::-webkit-slider-runnable-track {     .customize-track();   }     &amp;::-moz-range-track {     .customize-track();   }     &amp;::-webkit-slider-thumb {     .customize-thumb();     .vertically-align-thumb();   }     &amp;::-moz-range-thumb {     .customize-thumb();   }     &amp;::-moz-range-progress {     background: @thumb-color;     border-radius: @track-border-radius 0 0 @track-border-radius;   } } <\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438\u0441\u044c.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-333534","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333534"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333534\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}