# custom html input with datalist not showing

**URL:** <https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072>\
**Category:** Uncategorized\
**Tags:** custom, front-end\
**Created:** [March 24, 2021, 9:01pm UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072 "2021-03-24T21:01:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tannonk](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/tannonk/32/1867_2.png) [@tannonk](https://support.prodi.gy/u/tannonk)\
**Post date:** [March 24, 2021, 9:01pm UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/1 "2021-03-24T21:01:23Z")

</div>

Hi there,

I'm putting together a custom recipe that uses an HTML `<input type=range>` slider. I would like to put tick marks at set intervals but I can't get these ticks to appear in Prodigy.

For example, my HTML code block is something like this:

```python
<form>
    <strong>FLUENCY</strong>
    <input type="range" id="fluency_range" style="width: 500px;" min="0" max="100" step="0.1" list="ticks">
    <datalist id="ticks">
        <option>0</option>
        <option>25</option>
        <option>50</option>
        <option>75</option>
        <option>100</option>
    </datalist>
</form>

```

If it helps, I've tested it in both Chrome and Firefox and am using Prodigy v1.10.4. Any suggestions would be appreciated!

Thanks

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [March 25, 2021, 2:58am UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/2 "2021-03-25T02:58:53Z")

</div>

Hi! I just tried it out in Chrome (89.0, macOS) and the result in Prodigy looks like this:

 ![Screenshot 2021-03-25 at 12.26.16](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/f/f343e7a971b94c27e3cecb0ed8005c2bc2b344da.png)

I think that's how a range input with ticks is supposed to look, right? It's not going to work in Firefox, though, but that's expected, according to this (8-years-old and open!) thread: [841942 - Consider displaying tick marks for \<input type=range\> when @list/\<datalist\> is used](https://bugzilla.mozilla.org/show_bug.cgi?id=841942)

---

<div class="post-metadata">

**Author:** ![tannonk](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/tannonk/32/1867_2.png) [@tannonk](https://support.prodi.gy/u/tannonk)\
**Post date:** [March 25, 2021, 10:44pm UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/3 "2021-03-25T22:44:14Z")

</div>

Hi Ines,

Thanks for the response. That's exactly what I was hoping to get too. I'm also running Chrome 89.0, on macOS, so it's unclear why the ticks don't show up for me. Here's what I see:

 ![Screenshot 2021-03-25 at 23.42.34](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/8/8a58074c5ebbf058ec4671bd8ca6fc5266c3bd33.png)

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [March 26, 2021, 10:58am UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/4 "2021-03-26T10:58:06Z")

</div>

This is definitely strange – I copied your exact code and tried it both as the `"html"` of a task and as the `"html_template"`, and it worked fine for me in Chrome every time 🤔 Can you share your recipe code?

---

<div class="post-metadata">

**Author:** ![tannonk](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/tannonk/32/1867_2.png) [@tannonk](https://support.prodi.gy/u/tannonk)\
**Post date:** [March 26, 2021, 2:56pm UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/5 "2021-03-26T14:56:22Z")

</div>

Sure, I've uploaded a minimal example of the recipe at [https://github.com/tannonk/prodigy\_human\_evaluation/blob/master/html\_range\_with\_ticks/recipe.py](https://github.com/tannonk/prodigy_human_evaluation/blob/master/html_range_with_ticks/recipe.py)

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [March 28, 2021, 1:54am UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/6 "2021-03-28T01:54:41Z")

</div>

Thanks! This is very mysterious indeed – I just ran your exact recipe code and here's how it looks for me in Chrome 🤔

 ![Screenshot 2021-03-28 at 12.46.41](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/d/d00b3a31f56dc3d2fd52cc4155285ba6531cd5ea.png)

And the recipe seems fine and there's nothing that would indicate a problem. Does it work for you outside of Prodigy in the same browser? For example, if you just make it a `.html` file and open it?

---

<div class="post-metadata">

**Author:** ![tannonk](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/tannonk/32/1867_2.png) [@tannonk](https://support.prodi.gy/u/tannonk)\
**Post date:** [March 28, 2021, 12:39pm UTC](https://support.prodi.gy/t/custom-html-input-with-datalist-not-showing/4072/7 "2021-03-28T12:39:07Z")

</div>

Yes, the ticks appear as expected when run as a regular `.html` file. I just tested the recipe out on a work server that's running a different installation of Prodigy (also v1.10.4) and there it works as expected! So the issue seems to be something to do with my local installation of Prodigy that I've been using for quick testing and development.