Как отобразить текущее значение поля ввода диапазона (слайдер)

Чего вы хотите достичь

イメージ説明

Я хочу вводить числа в форму django следующим образом.

Текущий код

class Comment_movie_CreateForm (ModelForm):
    class Meta:
        model = Comment_movie
        fields = ('comment','stars')
    comment = forms.CharField (required = False, label ='comment', max_length = 1000)
    stars = forms.FloatField (required = False, label ='stars', widget = forms.TextInput (
       attrs = {'type':'range','id':'form_homework', "class": "no_resize",'min': '0','max': '10','step': '0.1' })))
    def clean (self):
        cleaned_data = super (). clean ()
        return cleaned_data
    def clean_stars (self):
        stars = self.cleaned_data ['stars']
        if stars! = None:
            if stars <0 or stars> 10:
                raise forms.ValidationError ("The rating input is incorrect.")
            return stars
        else: else:
            raise forms.ValidationError ("The rating input is incorrect.")
    def clean_comment (self):
        comment = self.cleaned_data ['comment']
        if len (comment)> 1000:
            raise forms.ValidationError ("There are too many characters.")
        elif len (comment) == 0:
            raise forms.ValidationError ("Please enter the characters.")
        return comment
    def __init__ (self, * args, ** kwargs):
        super () .__ init__ (* args, ** kwargs)
        self.label_suffix = ""
<form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form }}
        {% if comment_tv %}
        <button type="submit">Edit Comment</button>
        <button type="submit" name="action" value="delete">Delete Comment</button>
        {% else %}
        <button type="submit">Post Comment</button>
        {% endif %}
    </form>

Что вы хотите спросить

Я хочу сделать слайд-бар как показано на рисунке. Как мне настроить CSS и javascript?

Вернуться на верх