{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Долго искал в Сети слайдер с дополнительными кнопками для установки предустановленных значений. Не нашел (искал вроде бы хорошо). Решил сделать сам. Для создания слайдера использовал Vue.js. Выкладываю здесь, может кому пригодится.","type":"unstyled","key":"brmvb"},{"data":{"image":{"id":"60b0b29dbd2ece299c036e1d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"28fqo"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":39,"offset":50}],"inlineStyleRanges":[{"length":89,"offset":0,"style":"BOLD"}],"text":"Материал с сайта phpnick.ru. Ссылка на материал - https://phpnick.ru/posts/category/js/72","type":"unstyled","key":"8h0o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, для создания кастомного Range Input или слайдера или slider’a нужны 3 составляющие, немного html, гораздо больше css и еще больше js-кода. Взболтать, но не перемешивать.","type":"unstyled","key":"5eae5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML","type":"unstyled","key":"fbkd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привожу прямо в виде html-страницы, думаю, никому не помешает.","type":"unstyled","key":"erfo0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bgtjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7si26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2a931"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dtm2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"26ab5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомный Range Input","type":"blockquote","key":"b5na8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b9lbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2kobn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3afut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8enro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Кастомный Range Input

","type":"blockquote","key":"aqugp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f065h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"9229q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7mkqp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"p4rr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"deckr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4stia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS","type":"unstyled","key":"ff4ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Естественно, стили даю для примера, можете менять на свое усмотрение.","type":"unstyled","key":"8tsld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#app {","type":"blockquote","key":"dg5mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-family: \"Avenir\", Helvetica, Arial, sans-serif;","type":"blockquote","key":"9h1hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -webkit-font-smoothing: antialiased;","type":"blockquote","key":"7ppd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -moz-osx-font-smoothing: grayscale;","type":"blockquote","key":"b5but"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"dakrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #22283e;","type":"blockquote","key":"31ch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"blockquote","key":"2s9dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin-top: 60px;","type":"blockquote","key":"30brs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 20px;","type":"blockquote","key":"dmr68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"17nqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".range-component .rangecontainer {","type":"blockquote","key":"cim4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%;","type":"blockquote","key":"c86e7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"3rakq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".range-component .rangecontainer .range {","type":"blockquote","key":"1v622"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -webkit-appearance: none;","type":"blockquote","key":"1fir7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" appearance: none;","type":"blockquote","key":"af2te"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%;","type":"blockquote","key":"373av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 20px;","type":"blockquote","key":"al7qg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 20px;","type":"blockquote","key":"4llkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: #c2c2c2;","type":"blockquote","key":"8qjet"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" outline: none;","type":"blockquote","key":"dq9h8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" opacity: 0.7;","type":"blockquote","key":"b7166"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -webkit-transition: .2s;","type":"blockquote","key":"5o7t1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" transition: opacity .2s;","type":"blockquote","key":"1qdgs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"c8gfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".range-component .rangecontainer .range:hover {","type":"blockquote","key":"464j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" opacity: 1;","type":"blockquote","key":"c4d5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"1mc3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".range-component .slidecontainer .range::-webkit-range-thumb {","type":"blockquote","key":"6dacf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -webkit-appearance: none;","type":"blockquote","key":"d5b22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" appearance: none;","type":"blockquote","key":"3ic5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 18px;","type":"blockquote","key":"d7s24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 18px;","type":"blockquote","key":"2ola6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: white;","type":"blockquote","key":"cr40q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"en2lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 50%;","type":"blockquote","key":"25o8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8ar1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".range-component .rangecontainer .range::-moz-range-thumb {","type":"blockquote","key":"9pkbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 18px;","type":"blockquote","key":"5hqhr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 18px;","type":"blockquote","key":"89ndv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: white;","type":"blockquote","key":"ck9nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"57ake"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 50%;","type":"blockquote","key":"56mds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"bu585"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".button {","type":"blockquote","key":"44mlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #54618b;","type":"blockquote","key":"itjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: none;","type":"blockquote","key":"ch7is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 7rem;","type":"blockquote","key":"9iaej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 25px;","type":"blockquote","key":"4evgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"blockquote","key":"dvv29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 15px 15px;","type":"blockquote","key":"d0dqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"90rs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-decoration: none;","type":"blockquote","key":"e8j18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: inline-block;","type":"blockquote","key":"dqdos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 24px;","type":"blockquote","key":"69dlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" opacity: 0.7;","type":"blockquote","key":"dn9at"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" -webkit-transition: .2s;","type":"blockquote","key":"e3ea1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" transition: opacity .2s;","type":"blockquote","key":"137qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: 15px 5px;","type":"blockquote","key":"9jun7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"e6bs4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".button:hover {","type":"blockquote","key":"fbegk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" opacity: 1;","type":"blockquote","key":"ftrtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"bmck0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"9hmj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"JS","type":"unstyled","key":"2l9g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и заключительная часть, та, что заставляет шевелиться html и css.","type":"unstyled","key":"1cri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" var app = Vue.extend({","type":"blockquote","key":"ef2u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" data() {","type":"blockquote","key":"eb10p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return {","type":"blockquote","key":"bisqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" value: 50,","type":"blockquote","key":"a8hgu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" };","type":"blockquote","key":"ef02h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"464d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" template: `","type":"blockquote","key":"1fmee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dj7pt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" `","type":"blockquote","key":"fao8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"35v71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" var range = Vue.extend({","type":"blockquote","key":"1bslk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" props: {","type":"blockquote","key":"f5m1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" value: {","type":"blockquote","key":"6pa4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" type: Number,","type":"blockquote","key":"f9a74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" required: true","type":"blockquote","key":"636in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"5m2gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" min: {","type":"blockquote","key":"8pdrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" type: Number,","type":"blockquote","key":"3ds00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" required: true","type":"blockquote","key":"7d0bj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"5lebd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" max: {","type":"blockquote","key":"7hfb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" type: Number,","type":"blockquote","key":"dg3up"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" required: true","type":"blockquote","key":"1adsr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"d4vkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"5nqio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" data(){","type":"blockquote","key":"d8jab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" return {","type":"blockquote","key":"493k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" currentValue: this.value","type":"blockquote","key":"2oli9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" };","type":"blockquote","key":"6kks9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"ls9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" methods: {","type":"blockquote","key":"btde6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" onInput() {","type":"blockquote","key":"18jed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.$emit('input', this.currentValue);","type":"blockquote","key":"c6k72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"5g0a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4atrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" setFirst(value) {","type":"blockquote","key":"6ltu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.$emit('input', value);","type":"blockquote","key":"41v0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" this.$refs['input'].value = value;","type":"blockquote","key":"9bcb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"a0cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"fnptc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" template: `","type":"blockquote","key":"9h3v0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"tieo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" `","type":"blockquote","key":"ap1c1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"2sirv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"354m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.component('app', app);","type":"blockquote","key":"4mv7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.component('range', range);","type":"blockquote","key":"2ck11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3vqbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"new Vue({","type":"blockquote","key":"ellua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" el: '#app',","type":"blockquote","key":"3ar9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"5kdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4hmsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"kjXExYVjuMJmxeIwqq1F"}],"entityMap":{"0":{"data":{"url":"https://phpnick.ru/posts/category/js/72"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Кастомный Range Input

{{ value }}%