{"version":3,"file":"CuantoNecesitasSlider.aaef7552.js","sources":["../../../app/javascript/components/appraiser/CuantoNecesitasSlider.vue?vue&type=template&lang.js","../../../app/javascript/components/appraiser/CuantoNecesitasSlider.vue"],"sourcesContent":["\n<div>\n    <h2 class=\"title mb-0\" style=\"font-size: 1.5rem\">¿Cuánto necesitas?</h2>\n    <p class=\"sub-title px-3 mb-5\">Elige la cantidad que necesitas para cumplir con tus objetivos.</p>\n    <h3 class=\"title mt-0\" style=\"font-weight: bold; font-size: 40px !important;\"\n        :style=\"{ color: loanColor }\">{{ formatPrice(budget) }}</h3>\n    <div class=\"slider-container mb-2\">\n        <input id=\"budget-slider\" type=\"range\" :min=\"rangeMin\" :max=\"rangeMax\" step=\"100\" :value=\"budget\"/>\n        <div class=\"labels d-flex justify-content-between\">\n            <span>{{ formatPrice(rangeMin) }}</span>\n            <span>{{ formatPrice(rangeMax) }}</span>\n        </div>\n    </div>\n    <p class=\"sub-title px-3 mb-5f\" style=\"font-size: 15px\">*Mueve la barra para indicar la cantidad de dinero que necesitas.</p>\n</div>\n","<template>\n    <div>\n        <h2 class=\"title mb-0\" style=\"font-size: 1.5rem\">¿Cuánto necesitas?</h2>\n        <p class=\"sub-title px-3 mb-5\">Elige la cantidad que necesitas para cumplir con tus objetivos.</p>\n        <h3 class=\"title mt-0\" style=\"font-weight: bold; font-size: 40px !important;\"\n            :style=\"{ color: loanColor }\">{{ formatPrice(budget) }}</h3>\n        <div class=\"slider-container mb-2\">\n            <input id=\"budget-slider\" type=\"range\" :min=\"rangeMin\" :max=\"rangeMax\" step=\"100\" :value=\"budget\"/>\n            <div class=\"labels d-flex justify-content-between\">\n                <span>{{ formatPrice(rangeMin) }}</span>\n                <span>{{ formatPrice(rangeMax) }}</span>\n            </div>\n        </div>\n        <p class=\"sub-title px-3 mb-5f\" style=\"font-size: 15px\">*Mueve la barra para indicar la cantidad de dinero que necesitas.</p>\n    </div>\n</template>\n<script>\n\nimport currencyFormatter from \"@/helpers/currency_formatter.js\";\nexport default {\n    props: {\n        initialBudget: { type: Number, required: false, default: 10000 },\n        rangeMin: { type: Number, required: false, default: 100 },\n        rangeMax: { type: Number, required: false, default: 100000 },\n        loanColor: { type: String, required: false, default: 'var(--prestaprenda-blue)' }\n    },\n    data() {\n        return {\n            budget: this.initialBudget\n        }\n    },\n    mounted() {\n        let rangeInput = document.getElementById('budget-slider')\n        let min = rangeInput.min\n        let max = rangeInput.max\n        rangeInput.style.backgroundSize = (rangeInput.value - min) * 100 / (max - min) + '% 100%'\n        this.budget = rangeInput.value\n\n        window.onresize = () => {\n            rangeInput.style.backgroundSize = (rangeInput.value - min) * 100 / (max - min) + '% 100%'\n            this.budget = rangeInput.value\n            this.$emit('setBudget', this.budget)\n        }\n\n        rangeInput.oninput = () => {\n            rangeInput.style.backgroundSize = (rangeInput.value - min) * 100 / (max - min) + '% 100%'\n            this.budget = rangeInput.value\n            this.$emit('setBudget', this.budget)\n        }\n    },\n    methods: {\n        formatPrice(value) {\n            return currencyFormatter.format(value);\n        }\n    },\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.slider-container {\n    width: 80%;\n    margin: 1rem auto;\n}\ninput[type=\"range\"] {\n    -webkit-appearance: none;\n    margin-right: 15px;\n    height: 7px;\n    overflow: visible;\n    background: #d5d5d5;\n    background-image: linear-gradient(#133c92, #133c92);\n    background-size: 31.25% 100%;\n    background-repeat: no-repeat;\n}\n\n/* Input Thumb */\ninput[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 20px;\n    width: 5px;\n    border-radius: 1rem;\n    border: none;\n    background: #133c92;\n    cursor: ew-resize;\n    box-shadow: 0 0 2px 0 #555;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n    -webkit-appearance: none;\n    height: 20px;\n    width: 5px;\n    border-radius: 1rem;\n    background: #133c92;\n    cursor: ew-resize;\n    box-shadow: 0 0 2px 0 #555;\n}\n\ninput[type=\"range\"]::-ms-thumb {\n    -webkit-appearance: none;\n    height: 20px;\n    width: 5px;\n    border-radius: 1rem;\n    background: #133c92;\n    cursor: ew-resize;\n\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n    background: #133c92;\n}\n\ninput[type=\"range\"]::-moz-range-thumb:hover {\n    background: #133c92;\n}\n\ninput[type=\"range\"]::-ms-thumb:hover {\n    background: #133c92;\n}\n\n/* Input Track */\ninput[type=range]::-webkit-slider-runnable-track  {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type=range]::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type=\"range\"]::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type=\"range\"]::-moz-range-progress {\n    background: #133c92;\n    height: 7px;\n}\n\n@media (min-width:1400px) {\n    .slider-container{\n        max-width: 650px;\n    }\n}\n</style>"],"names":["render","_vm","_h","_c","staticRenderFns","__vue2_script","rangeInput","min","max","value","currencyFormatter"],"mappings":"8GAAA,IAAIA,EAAS,UAAY,CAAC,IAAIC,EAAI,KAASC,EAAGD,EAAI,eAAmBE,EAAGF,EAAI,MAAM,IAAIC,EAAG,OAAOC,EAAG,MAAM,CAACA,EAAG,KAAK,CAAC,YAAY,aAAa,YAAY,CAAC,YAAY,QAAQ,CAAC,EAAE,CAACF,EAAI,GAAG,oBAAoB,CAAC,CAAC,EAAEE,EAAG,IAAI,CAAC,YAAY,qBAAqB,EAAE,CAACF,EAAI,GAAG,iEAAiE,CAAC,CAAC,EAAEE,EAAG,KAAK,CAAC,YAAY,aAAa,YAAY,CAAC,cAAc,OAAO,YAAY,iBAAiB,EAAE,MAAO,CAAE,MAAOF,EAAI,SAAS,CAAG,EAAE,CAACA,EAAI,GAAGA,EAAI,GAAGA,EAAI,YAAYA,EAAI,MAAM,CAAC,CAAC,CAAC,CAAC,EAAEE,EAAG,MAAM,CAAC,YAAY,uBAAuB,EAAE,CAACA,EAAG,QAAQ,CAAC,MAAM,CAAC,GAAK,gBAAgB,KAAO,QAAQ,IAAMF,EAAI,SAAS,IAAMA,EAAI,SAAS,KAAO,KAAK,EAAE,SAAS,CAAC,MAAQA,EAAI,MAAM,CAAC,CAAC,EAAEE,EAAG,MAAM,CAAC,YAAY,uCAAuC,EAAE,CAACA,EAAG,OAAO,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,YAAYA,EAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAEE,EAAG,OAAO,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,YAAYA,EAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAEE,EAAG,IAAI,CAAC,YAAY,uBAAuB,YAAY,CAAC,YAAY,MAAM,CAAC,EAAE,CAACF,EAAI,GAAG,mEAAmE,CAAC,CAAC,CAAC,CAAC,CAAC,EAC1gCG,EAAkB,CAAA,ECkBtB,MAAAC,EAAA,CACA,MAAA,CACA,cAAA,CAAA,KAAA,OAAA,SAAA,GAAA,QAAA,GAAA,EACA,SAAA,CAAA,KAAA,OAAA,SAAA,GAAA,QAAA,GAAA,EACA,SAAA,CAAA,KAAA,OAAA,SAAA,GAAA,QAAA,GAAA,EACA,UAAA,CAAA,KAAA,OAAA,SAAA,GAAA,QAAA,0BAAA,CACA,EACA,MAAA,CACA,MAAA,CACA,OAAA,KAAA,aACA,CACA,EACA,SAAA,CACA,IAAAC,EAAA,SAAA,eAAA,eAAA,EACAC,EAAAD,EAAA,IACAE,EAAAF,EAAA,IACAA,EAAA,MAAA,gBAAAA,EAAA,MAAAC,GAAA,KAAAC,EAAAD,GAAA,SACA,KAAA,OAAAD,EAAA,MAEA,OAAA,SAAA,IAAA,CACAA,EAAA,MAAA,gBAAAA,EAAA,MAAAC,GAAA,KAAAC,EAAAD,GAAA,SACA,KAAA,OAAAD,EAAA,MACA,KAAA,MAAA,YAAA,KAAA,MAAA,CACA,EAEAA,EAAA,QAAA,IAAA,CACAA,EAAA,MAAA,gBAAAA,EAAA,MAAAC,GAAA,KAAAC,EAAAD,GAAA,SACA,KAAA,OAAAD,EAAA,MACA,KAAA,MAAA,YAAA,KAAA,MAAA,CACA,CACA,EACA,QAAA,CACA,YAAAG,EAAA,CACA,OAAAC,EAAA,OAAAD,CAAA,CACA,CACA,CAEA"}