# Dom range api in Elm

**URL:** https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593
**Category:** Learn
**Created:** [December 2, 2020, 1:45pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593 "2020-12-02T13:45:53Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ubourdon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ubourdon/32/3655_2.png) [@ubourdon](https://discourse.elm-lang.org/u/ubourdon)
#### Post date: [December 2, 2020, 1:45pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593/1 "2020-12-02T13:45:53Z")

</div>

Hi,

I am looking for a way to use dom range api (or selection) [https://developer.mozilla.org/fr/docs/Web/API/Range](https://developer.mozilla.org/fr/docs/Web/API/Range)

in a Elm context (not using port).  
Is that exist for 0.19 ?

Thx for your answers.

---

<div class="post-metadata">

### Author: ![tgelu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/tgelu/32/1008_2.png) [@tgelu](https://discourse.elm-lang.org/u/tgelu)
#### Post date: [December 2, 2020, 3:23pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593/2 "2020-12-02T15:23:00Z")

</div>

I think unless someone from the core team implements something, the best you can do is a web component. That worked fine for me but I ended up using ports in the end as I had a simple use case.

---

<div class="post-metadata">

### Author: ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)
#### Post date: [December 2, 2020, 8:21pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593/3 "2020-12-02T20:21:36Z")

</div>

I think the answer is no.

You can listen to `selection` events from pure Elm, but this event does not tell you much that is useful. The next thing you might want to do is to get the selection and range:

```auto
document.getSelection();
selection.getRangeAt();

```

And there is no built-in Elm API for this.

By chance, I have been working a good amount with the Selection API recently. I found the best way for me to integrate it into Elm was through custom elements. You can find my work in progress code here:

> <https://github.com/rupertlssmith/elm-input-spike/blob/main/assets/elm-editable.js>

---

<div class="post-metadata">

### Author: ![ubourdon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ubourdon/32/3655_2.png) [@ubourdon](https://discourse.elm-lang.org/u/ubourdon)
#### Post date: [December 2, 2020, 10:28pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593/4 "2020-12-02T22:28:48Z")

</div>

Thx very much. I will look at your work. Very useful.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [December 12, 2020, 10:28pm UTC](https://discourse.elm-lang.org/t/dom-range-api-in-elm/6593/5 "2020-12-12T22:28:54Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
