{"html":"<div id=\"{{uc_id}}\" class=\"ue-range-slider {{ucform_class}}\">  \n  \n  <label class=\"ue-range-slider-label\" for=\"ue-range-slider-field_{{uc_id}}\">{{label|raw}}<\/label>\n    \n  <div class=\"ue-range-slider-desc-wrapper\">\n   <div class=\"ue-range-slider-holder\">\n    <div class=\"ue-range-slider-current-value-holder\">\n      \t{% if show_text_before_current_value == \"true\" %}<span class=\"ue-range-slider-current-value-text-before\">{{text_before_current_value|raw}} <\/span>{% endif %}\n    \t{% if default_value is not empty %}<span class=\"ue-range-slider-current-value\">{{default_value}}<\/span>{% endif %}\t\n      \t{% if show_text_after_curent_value == \"true\" %}<span class=\"ue-range-slider-current-value-text-after\"> {{text_after_current_value|raw}}<\/span>{% endif %}\t\n    <\/div>\n    \n  \t<input type=\"range\" id=\"ue-range-slider-field_{{uc_id}}\" class=\"ue-range-slider-field ue-input-field\" name=\"{{field_name|raw}}\" step=\"{{step}}\" value=\"{{default_value}}\" min=\"{{minimum_value}}\" max=\"{{maximum_value}}\" data-editor=\"{{uc_inside_editor}}\">\n    \n    {% if show_min_max_values == \"true\" %}\n    <div class=\"ue-range-slider-min-max-holder\">\n      \n    \t<div class=\"ue-range-slider-min-holder\">\n          \t{% if text_before_min_value is not empty %}<span class=\"ue-range-slider-min-max-text-before\">{{text_before_min_value|raw}} <\/span>{% endif %}\n      \t\t{% if minimum_value is not empty %}<span class=\"ue-range-slider-min-value\">{{minimum_value}}<\/span>{% endif %}\n          \t{% if show_text_after_min_max_values == \"true\" %}<span class=\"ue-range-slider-min-max-text-after\"> {{text_after_min_max_values|raw}}<\/span>{% endif %}\n      \t<\/div>\n      \n      \t<div class=\"ue-range-slider-max-holder\">\n      \t\t{% if text_before_max_value is not empty %}<span class=\"ue-range-slider-min-max-text-before\">{{text_before_max_value|raw}} <\/span>{% endif %}\n      \t\t{% if maximum_value is not empty %}<span class=\"ue-range-slider-max-value\">{{maximum_value}}<\/span>{% endif %}\n          \t{% if show_text_after_min_max_values == \"true\" %}<span class=\"ue-range-slider-min-max-text-after\"> {{text_after_min_max_values|raw}}<\/span>{% endif %}\n      \t<\/div>\n\n    <\/div>\n    {% endif %}\n   <\/div>\n   {% if show_description == \"true\" %}<div class=\"ue-range-slider-descr\">{{description|raw}}<\/div>{% endif %}\t\n    \n  <\/div>\n  \n<\/div>","css":"#{{uc_id}}.ucform-has-conditions{\n\tdisplay: none;\n}\n\n{% if uc_inside_editor == \"yes\" %}\n  #{{uc_id}}.ucform-has-conditions{\n      display: block;\n  }\n{% endif %}\n\n#{{uc_id}} *{\n  box-sizing: border-box;\n  transition: all 200ms ease-in-out;\n}\n#{{uc_id}} {\n  display: flex;\n  width:100%;\n}\n\n{% if (show_label == \"true\") and (layout == \"column\") %}\n#{{uc_id}} .ue-range-slider-label{\n  display: block;\n  width:100%;\n  max-width: 100%;\n\n}\n{% endif %}\n{% if (show_label == \"true\") and (layout == \"row\") %}\n#{{uc_id}} .ue-range-slider-label{\n \/* max-width: 100%; *\/\n  flex-shrink: 0;\n}\n{% endif %}\n\n#{{uc_id}} .ue-range-slider-field{\n  width:100%;\n  cursor:pointer;\n}\n\n#{{uc_id}} .ue-range-slider-field:focus{\n\toutline: 1px solid #000;\n}\n\n#{{uc_id}} .ue-range-slider-desc-wrapper{\n  width:100%;\n  display:flex;\n}\n#{{uc_id}} .ue-range-slider-holder{\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    flex-shrink: 1;\n}\n\n{% if show_min_max_values == \"true\" %}\n#{{uc_id}} .ue-range-slider-min-max-holder{\n\tdisplay: flex;\n  \tjustify-content: space-between;\n  \talign-items: center;\n}\n{% endif %}\n\n{% if show_text_after_min_max_values == \"true\" %}\n#{{uc_id}} .ue-range-slider-min-max-text-after{\n\n}\n{% endif %}\n\n#{{uc_id}} .ue-range-slider-current-value-holder{\n  max-width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n}\n\n{% if show_description == \"true\" %}\n#{{uc_id}} .ue-range-slider-descr{\n  width:100%;\n  flex-grow: 1;\n  flex-shrink: 2;\n}\n{% endif %}\n\n#{{uc_id}} .ue-range-slider-field {\n  -webkit-appearance: none;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  margin: 0;\n}\n\n#{{uc_id}} .ue-range-slider-field::-webkit-slider-thumb {\n  -webkit-appearance: none;\n          appearance: none;\n  cursor: pointer;\n  -webkit-transition: all 200ms ease-in-out;\n  transition: all 200ms ease-in-out;\n}\n#{{uc_id}} .ue-range-slider-field::-moz-range-thumb {\n  cursor: pointer;\n  -moz-transition: all 200ms ease-in-out;\n  -webkit-transition: all 200ms ease-in-out;\n  -webkit-appearance: none;\n   appearance: none;\n  -moz-appearance: none;\n  border-radius:{{thumb_border_radius}};\n}\n\n#{{uc_id}} .ue-range-slider-field:active::-moz-range-thumb {\n  background: {{thumb_color_hover}};\n}\n\n{% if show_grow_effect_on_hover == \"true\" %}\n#{{uc_id}} .ue-range-slider-field:hover::-webkit-slider-thumb{\n  box-shadow: 0 0 0 3px #fff, 0 0 0 6px {{thumb_color_hover}};\n}\n#{{uc_id}} .ue-range-slider-field:hover::-moz-range-thumb {\n  box-shadow: 0 0 0 3px #fff, 0 0 0 6px {{thumb_color_hover}};\n}\n{% endif %}","js":"{{ ucfunc(\"put_docready_start\") }}\n\t\t\n\tvar objSlider = jQuery(\"#{{uc_id}}\");  \n  \tvar objInput = objSlider.find(\".ue-range-slider-field\");\n\n\t\/*\n    *\tupdate values\n    *\/\n  \tfunction onInput(){\n    \n      \tvar objInput = jQuery(this);\n      \tvar objParentHolder = objInput.parents(\".ue-range-slider-holder\");\n      \tvar objCurrentValue = objParentHolder.find(\".ue-range-slider-current-value\")\n      \tvar currentValue = objInput.val();\n      \n      \tobjInput.attr(\"value\", currentValue);\n      \n    \tobjCurrentValue.text(currentValue);\n          \n    }  \n  \n \tobjInput.on(\"input\", onInput);\n  \n  \t\/\/start conditions\t\n\t{% if uc_inside_editor == \"yes\" %}setTimeout(function(){ {% endif %}\t\n\n\tvar strJsonVisibility = {{put_attributes_json(null,\"visibility\")}};\n    var arrVisibility = JSON.parse(strJsonVisibility);\n\n\tfunction setFieldVisibility(){\n    \n      g_ucUnlimitedForms.setVisibility(arrVisibility, \"{{uc_id}}\", \"{{ucform_class}}\");\n \n    }\n\n\tsetFieldVisibility();\t\n\n  \t\/\/init events\n    var objAllInputFields = jQuery(\".ue-input-field\");\n    var objAllOptionFields = jQuery(\".ue-option-field\");\n\n    objAllInputFields.on('input', setFieldVisibility);    \n    objAllOptionFields.on('change', setFieldVisibility);                                                            \n    \n    objAllInputFields.on('input_calc', setFieldVisibility);\n\tobjAllOptionFields.on('input_calc', setFieldVisibility); \n    {% if uc_inside_editor == \"yes\" %} },2000);{% endif %}\t \n\t\/\/end conditions     \t\n\n    \t\n{{ ucfunc(\"put_docready_end\") }}"}