Shopify Image width slider not working - slider

Question

I achieved success to add new block in Shopify using schema and Shopify liquid. I have added schema which is expected to adjust the width of an image one on left side and one for right side.I am quite close but something missing here.Is there something wrong with style="width:{{img_width}}vw" or Image width schema ? Thanks
Both image width slider does not make difference with image screenshot.
{% elsif block.type == 'side_by_side' %}
<div class="container">
<div class="eight columns image_column">
{% if block.settings.image-left %}
<p>
{% assign image_left_width = block.settings.image_width %}
<img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
</p>
{% endif %}
</div>
<div class="eight columns image_column">
{% if block.settings.image-right %}
<p>
{% assign image_rigth_width = block.settings.image_width %}
<img src =" {{ block.settings.image-right | img_url: '300x', scale: 2}}" style="width:{{image_right_width}}vw" alt="{{block.settings.image-right.alt}}" class="lazyload transition-in" >
</p>
{% endif %}
</div>
</div>
Image block Schema
{
"type": "side_by_side",
"name": "side_by_side",
"settings": [
{
"type": "image_picker",
"id": "image-left",
"label": "Image-left"
},
{
"type": "range",
"id": "image_left_width",
"label": "Image width",
"min": 50,
"max": 100,
"step": 5,
"default": 100,
"unit": "vw"
},
{
"type": "image_picker",
"id": "image-right",
"label": "Image-right"
},
{
"type": "range",
"id": "image_right_width",
"label": "Image width",
"min": 50,
"max": 100,
"step": 5,
"default": 100,
"unit": "vw"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Image on left"
},
{
"value": "right",
"label": "Image on right"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Side by Side Engineering "
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
},

Answer 1

Thats because you are assigning a null value and using that null value.
{% assign image_left_width = block.settings.**image_width** %}
Note that, in your schema there is no element with id = image_width. You already have elements with id = image_left_width / image_right_width. But now, you are creating a new variable image_left_width and assigning it with a null value. Then you are setting your image width that null value. Why not just skip the "assign" code? i.e. delete that line. like..
<p>
<img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{block.settings.image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
</p>
If you still want to first assign into a new variable then do this.
{% assign image_left_width = block.settings.image_left_width %}