Odyssey styleguide

<div class="odyssey-slider ">
    <div class="odyssey-slider__label-wrapper">
        <label>Max media spend:</label>
        <label class="odyssey-slider__label--bold">1%</label>
    </div>
    <div class="odyssey-slider__data">
        <input list="datalist" value="20" min="1" max="100" step="1" type="range"/>
        <datalist class="odyssey-slider__data--ticks">
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
            <option class="odyssey-slider__data--tick"/>
        </datalist>
        <datalist class="odyssey-slider__data--labels">
            <option value="1" label="1%">1%</option>
            <option value="25" label="25%">25%</option>
            <option value="50" label="50%">50%</option>
            <option value="75" label="75%">75%</option>
            <option value="100" label="100%">100%</option>
        </datalist>
    </div>
</div>