question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Slider] Label always visible

See original GitHub issue

Is your feature request related to a problem? Please describe.

There’s currently no easy way to keep the slider label always visible. The existing labelBehaviors don’t cover it.

Describe the solution you’d like

Add a new labelBehavior called LABEL_ALWAYS_VISIBLE that would keep the label always visible, and not dependent on touch.

Describe alternatives you’ve considered

Right now, to implement this behavior, one must use reflection to access private methods and fields of the BaseSlider, or re-create the label outside of the view, and make it track the slider thumb position.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:65
  • Comments:18 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
wongcaincommented, Apr 20, 2021

In case it is helpful to others, I ended up disabling the built-in labels and adding my own that are always visible. I then made use of the Slider.OnChangeListener callback to update the text and position of the label like this:

    override fun onValueChange(slider: Slider, value: Float, fromUser: Boolean) {
       // valueTextView is my custom label
        valueTextView.apply {
            text = getSliderValueLabel(value)
            requestLayout()
        }
        post { updateValueLabelPosition() }
    }

    private fun getSliderValueLabel(value: Float): String {
        val valueRoundedToTenth = (value * LABEL_ROUNDING_FACTOR).roundToInt() / LABEL_ROUNDING_FACTOR
        return when {
            valueRoundedToTenth == 0f -> "0"
            valueRoundedToTenth > 0 -> "+$valueRoundedToTenth"
            else -> valueRoundedToTenth.toString()
        }
    }

    private fun updateValueLabelPosition() {
        val valueRangeSize = sliderView.valueTo - sliderView.valueFrom
        val valuePercent = (sliderView.value - sliderView.valueFrom) / valueRangeSize
        val valueXDistance = valuePercent * sliderView.trackWidth
        val offset =
            sliderView.x + sliderView.trackSidePadding - (valueTextView.width.toFloat() / 2)
        valueTextView.x = valueXDistance + offset
    }

3reactions
baldhead69commented, Nov 4, 2020

“Label always visible” nothing yet ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

material slider and range slider tooltip not always visible
Currently Material Slider has not state of label for ALWAYS VISIBLE. But we can do one thing to overcome this issue.
Read more >
LabelVisibilityMode | Android Developers
The label visibility mode determines whether to show or hide labels in the navigation items. Setting the label visibility mode to ...
Read more >
React Slider component - Material UI - MUI
Label always visible. You can force the thumb label to be always visible with valueLabelDisplay="on" .
Read more >
Slider | Mantine
labelAlwaysOn – if true – label will always be displayed, by default label is visible only when user is dragging; labelTransition , labelTransitionDuration...
Read more >
Slider component — Vuetify
You can display a thumb label while sliding or always with the thumb-label prop . It can have a custom color by setting...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found