input type "range" shows incorrect value

I have a view, and in template there is a form (NOT django’s form), this form is sent with post request and all data is written to the dict “params”, then the same template renders. In template all inputs has value from those dict “params”.
And also there are two inputs with type “range”, their values are taken from “params” too, but only one of them has value from “params”, another one’s slider placed exactly in the middle, although when I check it’s value in inspector - the value is correct.
Can anyone tell please why one of these sliders behaves like that?

Hi azazellooo,

Please post your template code and form (if you’re using one) code and the resulting html in code blocks using three backticks, ``` at the start and end. It’s currently hard to understand what you’re attempting, what you’re experiencing and what the problem is.

hi, the problematic input is “principal”. It’s value after submitting is correct, but slider pointer placed incorrect .


                                        <div class="form-group range-wrap">
                                            <label for="principal">Закупочная стоимость, руб. </label>
                                            {{ principal }}
                                            <input type="range" class="form-control range" name="principal" value="{{ principal }}"
                                                   id="principal"  min="30000" max="5000000" step="1000">
                                             <output class="bubble"></output>
                                        </div>


                                        <div class="form-group">
                                            <label for="initial_money">Первоначальный взнос, руб.</label>
                                            {% if errors.initial_money %}
                                                <div class="mt-2 font-weight-bold text-danger">{{ errors.initial_money }}</div>
                                            {% endif %}
                                            <input type="text" class="form-control" name="initial_money"
                                                   id="initial_money" value="{{ params.initial_money.value }}" placeholder="1000">
                                        </div>

                                        <div class="form-group">
                                            <label for="fee">Расходы на сделку, руб.</label>
                                            <input type="text" class="form-control" name="fee" id="fee"
                                                   value="{{ params.fee.value }}" placeholder="21">
                                        </div>


                                        <div class="form-select">
                                            <label for="vehicle_manufacturer">Произодитель автомобиля</label>
                                            <select class="form-control" name="vehicle_manufacturer" id="vehicle_manufacturer">
                                                <option value="foreign"{% if params.vehicle_manufacturer.value == 'foreign' %}selected{% endif %}>иностранный</option>
                                                <option value="domestic"{% if params.vehicle_manufacturer.value == 'domestic' %}selected{% endif %}>отечественный</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="manufacture_year">Год выпуска автомобиля</label>
                                            <input type="number" class="form-control" name="manufacture_year" id="manufacture_year"
                                                   value="{{ params.manufacture_year.value }}">
                                        </div>

                                        <div class="form-check m-3">
                                            <input {% if params.vehicle_novelty.value == 'on' %} checked {% endif %}  type="checkbox" class="form-check-input" name="vehicle_novelty" id="vehicle_novelty">
                                            <label class="form-check-label" for="vehicle_novelty">Новый автомобиль</label>

                                        </div>

                                        <div class="form-group">
                                            <label for="tech_perc">Техническая наценка, %</label>
                                            <input type="text" class="form-control" name="tech_perc" id="tech_perc"
                                                   value='{{ params.tech_perc.value |default:"1" }}' placeholder="1">
                                        </div>

                                        <div class="form-check m-3">
                                            <input {% if params.other_negatives.value == 'on' %} checked {% endif %}  type="checkbox" class="form-check-input" name="other_negatives" id="other_negatives">
                                            <label class="form-check-label" for="other_negatives">Прочие негативные факторы относительно финансовой репутации</label>
                                        </div>

                                        <div class="form-group range-wrap">
                                            <label for="num_payments">Длительность займа, мес.</label>
                                            <input type="range" class="form-control range" name="num_payments"
                                                   id="num_payments" value="{{ params.num_payments.value }}" min="3" max="36" >
                                             <output id="num_payments_output" class="bubble"></output>
                                        </div>


                                        <div class="form-select mb-3">
                                            <label for="client">Клиент</label>
                                            <select class="form-control" name="client" id="client">
                                                <option value="other"{% if params.client.value == 'other' %}selected{% endif %}>---</option>
                                                <option value="employee" {% if params.client.value == 'employee' %}selected{% endif %} >сотрудник</option>
                                                <option value="trusted"{% if params.client.value == 'trusted' %}selected{% endif %}>проверенный клиент</option>
                                            </select>
                                        </div>

                                        <div class="form-select mb-3">
                                            <label for="unofficial_income">Неофициальный доход</label>
                                            <select class="form-control" name="unofficial_income" id="unofficial_income">
                                                <option value="none"{% if params.unofficial_income.value == 'none' %}selected{% endif %}>---</option>
                                                <option value="confirmed"{% if params.unofficial_income.value == 'confirmed' %}selected{% endif %}>подтвержденный</option>
                                                <option value="unconfirmed"{% if params.unofficial_income.value == 'unconfirmed' %}selected{% endif %}>неподтвержденный</option>
                                            </select>
                                        </div>

                                        <div class="form-check m-3">
                                            <input {% if params.extra_collateral.value == 'on' %} checked {% endif %} type="checkbox" class="form-check-input" name="extra_collateral" id="extra_collateral">
                                            <label class="form-check-label" for="extra_collateral">Дополнительный залог</label>
                                        </div>

                                        <div class="form-check m-3">
                                            <input {% if params.extra_sponsor.value == 'on' %} checked {% endif %}  type="checkbox" class="form-check-input" name="extra_sponsor" id="extra_sponsor">
                                            <label class="form-check-label" for="extra_sponsor">Дополнительный поручитель</label>

                                        </div>

                                        <div class="form-group">
                                            <label for="get_money_date">Дата выдачи</label>
                                            <input type="date" class="form-control" name="get_money_date"
                                                   id="get_money_date" value="{{ params.get_money_date.value }}"
                                                   placeholder="01.01.2020">
                                        </div>

                                        <div class="form-group">
                                            <label for="first_payment_date">Дата первого платежа</label>
                                            <input type="date" class="form-control" name="first_payment_date"
                                                   id="first_payment_date" value="{{ params.first_payment_date.value }}"
                                                   placeholder="01.01.2020">
                                        </div>


                                        <br/>

                                        <button type="submit" class="btn btn-primary">Отправить</button>
                                    </form>```

Are you using a specific frontend library to render the range element?

nope, I have only some vanilla javascript

What is the type and value of principal?

type is integer and value can be integer in range 30000 to 5000000

If you look at your screenshot of the inspector, you’ll see value="1065000,0". If that’s how the response is rendered from the server, that implies principal is not an integer, but some other type.