Как изменить размер селектора ползунка / диапазона, используя javascript? - PullRequest
Новая
       59

Как изменить размер селектора ползунка / диапазона, используя javascript?

0 голосов
/ 28 мая 2020

Я ищу способ автоматизировать выбор диапазона дат с помощью ползунка / горизонтальной полосы прокрутки с курсором, который можно выбрать на обоих концах и перетащить, чтобы установить диапазон. Похоже, это Я ищу способ автоматизировать изменение даты. Это содержимое контейнера скруббера. 

<svg id="ch-chart-svg-346" height="53" width="882" class="ch-chart">
    <defs>
        <clipPath id="chart-clip-346">
            <rect class="ch-chart-svg-clipPathRect-346" x="0" y="0" width="882" height="41"></rect>
        </clipPath>
        <pattern id="pattern_generating" width="10" height="10" patternUnits="userSpaceOnUse"
            patternTransform="rotate(50)">
            <rect width="2" height="10" transform="translate(0,0)" fill="#d0d3d4"></rect>
        </pattern>
    </defs>
    <g clip-path="url(#chart-clip-346)" transform="translate(0,0)">
         .............rectangles....................
    </g>
    <g>
        <g class="ch-brush-visual" transform="translate( 0, 41 )">
            <rect x="792.803977751559" y="4.800000000000001" width="9.9602224844092" height="2.4000000000000004"></rect>
            <circle cx="792.803977751559" cy="6" r="3"></circle>
            <circle cx="802.7642002359682" cy="6" r="3"></circle>
        </g>
        <g class="ch-brush" style="pointer-events: all;">
            <g class="invert-indicators">
                <rect x="0" y="0" height="42" width="792.803977751559"></rect>
                <rect x="802.7642002359682" y="0" height="42" width="79.23579976403175"></rect>
            </g>
            <rect class="background" style="visibility: hidden; cursor: crosshair;" x="0" width="882" height="53">
            </rect>
            <rect class="extent" style="" x="792.803977751559" width="9.9602224844092" height="53"></rect>
            <g class="resize e" style="cursor: ew-resize;" transform="translate(802.7642002359682,0)">
                <rect x="-3" width="6" height="53" style="visibility: hidden;"></rect>
            </g>
            <g class="resize w" style="cursor: ew-resize;" transform="translate(792.803977751559,0)">
                <rect x="-3" width="6" height="53" style="visibility: hidden;"></rect>
            </g>
        </g>
    </g>
</svg>

Изменение размера e и w - это две конечные точки, которые я хочу эффективно «изменить» с помощью сценария. Положение курсора отражается в значении перевода в '.... transform = "translate (792.803977751559,0)"' Когда я просто меняю весь html на '.... transform = "translate (782.803977751559, 0) "', например, значения не сохраняются, и вот где я застрял. Я начинаю сомневаться, иду ли я здесь в совершенно неправильном направлении, поэтому и спрашиваю.

Спасибо!

...