Label for each points

[ilya-raevskiy]

Is it possible to do so

[githuboftigran]

@ilya-raevskiy , thanks for the question. It's not possible and I don't actually want to add this functionality because I think this won't be good in terms of UI/UX. A similar issue #15 was created a long ago. I explained my position there, please read.

[kuldeepGomilestone]

Hey @ilya-raevskiy , i know it's a bit late but I managed to make both the labels permanent, I modified the below-mentioned file.

rn-range-slider\android\src\main\java\com\ashideas\rnrangeslider\RangeSlider.java

you need to modify the onDraw function as mentioned below. Note: I am neither an android developer nor a java developer, so please forgive me if you see some bad coding here.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (minValue == Long.MIN_VALUE || maxValue == Long.MAX_VALUE) { //Values are not set yet, don't draw anything
        return;
    }
    float labelTextHeight = getLabelTextHeight();
    float labelHeight = labelStyle == LabelStyle.NONE ? 0 : 2 * labelBorderWidth + labelTailHeight + labelTextHeight + 2 * labelPadding;
    float labelAndGapHeight = labelStyle == LabelStyle.NONE ? 0 : labelHeight + labelGapHeight;

    float drawingHeight = labelAndGapHeight + 2 * thumbRadius;
    float height = getHeight();
    if (height > drawingHeight) {
        if (gravity == Gravity.BOTTOM) {
            canvas.translate(0, height - drawingHeight);
        } else if (gravity == Gravity.CENTER) {
            canvas.translate(0, (height - drawingHeight) / 2);
        }
    }

    float cy = labelAndGapHeight + thumbRadius;
    float width = getWidth();
    float availableWidth = width - 2 * thumbRadius;

    // Draw the blank line
    canvas.drawLine(thumbRadius, cy, width - thumbRadius, cy, blankPaint);
    float lowX = thumbRadius + availableWidth * (lowValue - minValue) / (maxValue - minValue);
    float highX = thumbRadius + availableWidth * (highValue - minValue) / (maxValue - minValue);

    // Draw the selected line
    if (rangeEnabled) {
        canvas.drawLine(lowX, cy, highX, cy, selectionPaint);
    } else {
        canvas.drawLine(thumbRadius, cy, lowX, cy, selectionPaint);
    }
    drawThumb(canvas, lowX, cy);
    drawThumb(canvas, highX, cy);

    // if (thumbRadius > 0) {
    //     drawThumb(canvas, lowX, cy);
    //     if (rangeEnabled) {
    //         drawThumb(canvas, highX, cy);
    //     }
    // }

    if (labelStyle == LabelStyle.NONE ) {
        return;
    }
    // if (labelStyle == LabelStyle.NONE || activeThumb == THUMB_NONE) {
    //     return;
    // }

    String text = formatLabelText(lowValue);
    float labelTextWidth = labelTextPaint.measureText(text);
    float labelWidth = labelTextWidth + 2 * labelPadding + 2 * labelBorderWidth;
    float cx = lowX;

    if (labelWidth < labelTailHeight / SQRT_3_2) {
        labelWidth = labelTailHeight / SQRT_3_2;
    }

    float y = labelHeight;

    // Bounds of outer rectangular part
    float top = 0;
    float left = cx - labelWidth / 2;
    float right = left + labelWidth;
    float bottom = top + labelHeight - labelTailHeight;
    float overflowOffset = 0;

    if (left < 0) {
        overflowOffset = -left;
    } else if (right > width) {
        overflowOffset = width - right;
    }

    left += overflowOffset;
    right += overflowOffset;
    preparePath(cx, y, left, top, right, bottom, labelTailHeight);

    canvas.drawPath(labelPath, labelBorderPaint);

    labelPath.reset();
    y = 2 * labelPadding + labelTextHeight + labelTailHeight;

    // Bounds of inner rectangular part
    top = labelBorderWidth;
    left = cx - labelTextWidth / 2 - labelPadding + overflowOffset;
    right = left + labelTextWidth + 2 * labelPadding;
    bottom = labelBorderWidth + 2 * labelPadding + labelTextHeight;

    preparePath(cx, y, left, top, right, bottom, labelTailHeight - labelBorderWidth);
    canvas.drawPath(labelPath, labelPaint);

    canvas.drawText(text, cx - labelTextWidth / 2 + overflowOffset, labelBorderWidth + labelPadding - labelTextPaint.ascent(), labelTextPaint);

     text = formatLabelText(highValue);
     labelTextWidth = labelTextPaint.measureText(text);
     labelWidth = labelTextWidth + 2 * labelPadding + 2 * labelBorderWidth;
     cx = highX;

    if (labelWidth < labelTailHeight / SQRT_3_2) {
        labelWidth = labelTailHeight / SQRT_3_2;
    }

     y = labelHeight;

    // Bounds of outer rectangular part
     top = 0;
     left = cx - labelWidth / 2;
     right = left + labelWidth;
     bottom = top + labelHeight - labelTailHeight;
     overflowOffset = 0;

    if (left < 0) {
        overflowOffset = -left;
    } else if (right > width) {
        overflowOffset = width - right;
    }

    left += overflowOffset;
    right += overflowOffset;
    preparePath(cx, y, left, top, right, bottom, labelTailHeight);

    canvas.drawPath(labelPath, labelBorderPaint);

    labelPath.reset();
    y = 2 * labelPadding + labelTextHeight + labelTailHeight;

    // Bounds of inner rectangular part
    top = labelBorderWidth;
    left = cx - labelTextWidth / 2 - labelPadding + overflowOffset;
    right = left + labelTextWidth + 2 * labelPadding;
    bottom = labelBorderWidth + 2 * labelPadding + labelTextHeight;

    preparePath(cx, y, left, top, right, bottom, labelTailHeight - labelBorderWidth);
    canvas.drawPath(labelPath, labelPaint);

    canvas.drawText(text, cx - labelTextWidth / 2 + overflowOffset, labelBorderWidth + labelPadding - labelTextPaint.ascent(), labelTextPaint);

       }