{"id":13700387,"url":"https://github.com/jonhull/GradientSlider","last_synced_at":"2025-05-04T18:35:05.901Z","repository":{"id":36058034,"uuid":"40356614","full_name":"jonhull/GradientSlider","owner":"jonhull","description":null,"archived":false,"fork":false,"pushed_at":"2019-11-25T04:34:20.000Z","size":138,"stargazers_count":242,"open_issues_count":8,"forks_count":29,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-13T06:33:26.317Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonhull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-07T11:11:03.000Z","updated_at":"2024-10-24T03:51:22.000Z","dependencies_parsed_at":"2022-07-11T09:32:40.428Z","dependency_job_id":null,"html_url":"https://github.com/jonhull/GradientSlider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonhull%2FGradientSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonhull%2FGradientSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonhull%2FGradientSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonhull%2FGradientSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonhull","download_url":"https://codeload.github.com/jonhull/GradientSlider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252383194,"owners_count":21739287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T20:00:55.156Z","updated_at":"2025-05-04T18:35:00.874Z","avatar_url":"https://github.com/jonhull.png","language":"Swift","funding_links":[],"categories":["Swift"],"sub_categories":[],"readme":"# GradientSlider\n![alt tag](https://cloud.githubusercontent.com/assets/167242/9134671/522e2f8a-3cbb-11e5-9d38-a0f1064a3e43.png)\n\nGradientSlider is a UIControl subclass which is similar to UISlider, but with a linear gradient coloring the slider’s track. Useful for creating color pickers. It is written in Swift 4.\n\n**Features**\n- Easily define a gradient by setting the min \u0026 max (i.e. left \u0026 right) colors\n- Rainbow gradients (with customizable saturation \u0026 brightness) for making Hue selection sliders\n- IBDesignable/Inspectable for direct use within Interface Builder\n- Add an icon or color to the slider thumb\n- Min/Max images (similar to UISlider)\n- Both Target/Action and Block-based callbacks\n- Customizable track thickness\n- Customizable track border and thumb size\n- Looks like UISlider by default, so they can be intermixed in the UI\n\n## Installation\nDrag the “GradientSlider.swift” file into your Xcode project\n\n## Usage via Interface Builder\nDrag a custom view into your storyboard and change it’s class to “GradientSlider”. Use the attributes inspector to optionally set the slider’s basic properties:\n- min/max color\n- hasRainbow (Note: the min color’s saturation \u0026 brightness are used)\n- value\n- minimum/maximum value\n- minimum/maximum images\n- thickness\n- thumbIcon\n\n## Setting the Track Gradient Programmatically\n### Min/Max Color\nThe track displays a linear gradient with the minColor corresponding to the minimumValue and the maxColor corresponding to the maximumValue. \n\n\tslider.minValue = UIColor.blue\n\tslider.maxValue = UIColor.orange\n\n![img alt](https://cloud.githubusercontent.com/assets/167242/9134778/8c34e16e-3cbc-11e5-9c54-452e8d3a2af7.png)\n\n### Rainbow\nWhen the `hasRainbow` property is set to true, the track displays a rainbow gradient which moves around the color wheel (starting and ending with red). The saturation \u0026 brightness are both pulled from the color in `minValue`.\n\n\tslider.minValue = UIColor.blue //This has full saturation \u0026 brightness\n\tslider.hasRainbow = true\n\n![img alt](https://cloud.githubusercontent.com/assets/167242/9134881/5269de02-3cbd-11e5-9d78-056aca2b42d9.png)\n\n### Convenience Methods\nSince one of the primary uses of the gradient sliders is to create color pickers, a few convenience methods have been provided for updating the colors.\n\n**HSB**\n\n`setGradientVaryingHue(saturation:CGFloat,brightness:CGFloat)` This method sets the track to a rainbow gradient with the given saturation and brightness. This is useful for choosing a hue in the context of the current saturation and brightness settings.\n\n`setGradientVaryingSaturation(hue:CGFloat,brightness:CGFloat)` This method sets the track to a gradient varying from grey to fully saturated with the hue and brightness provided. This is useful for choosing a saturation value in the context of the current hue and brightness settings.\n\n`setGradientVaryingBrightness(hue:CGFloat,saturation:CGFloat)` This method sets the track to a gradient varying from black to full brightness with the hue and saturation provided. This is useful for choosing a brightness value in the context of the current hue and saturation settings.\n\n**RGB**\n\n`setGradientVaryingRed(green:CGFloat, blue:CGFloat)` This method sets the track to a gradient with varying red for the given green \u0026 blue values.\n\n`setGradientVaryingGreen(red:CGFloat, blue:CGFloat)` This method sets the track to a gradient with varying green for the given red \u0026 blue values.\n\n`setGradientVaryingBlue(red:CGFloat, green:CGFloat)` This method sets the track to a gradient with varying blue for the given red \u0026 green values.\n\n**Grayscale**\n\n`setGradientForGrayscale()` This method sets the track to a gradient from black to white.\n\n## Responding to User Interaction\n### Target/Action\nAs a UIControl subclass, the traditional target/action approach is fully supported. The slider will send TouchDown, ValueChanged, and TouchUpInside actions. If the `continuous` property is set to true (which it is by default), then the slider will send ValueChanged actions as the slider changes, otherwise a ValueChanged action is only sent when the user releases the slider.\n\n### ActionBlock\nThe slider will also call it’s actionBlock when its value is changed. If the `continuous` property is set to true (which it is by default), then the slider will call its actionBlock as the slider changes, otherwise it will only call it once when the slider is released.\nThe `actionBlock` property takes a closure which takes 3 parameters: The slider being changed, the new value, and whether the slider has finished updating. The block has no return value. \nIt’s signature is: `(GradientSlider,CGFloat,Bool)-\u003e()`\n\nHere is an example of a hue slider which updates it’s own `thumbColor` to the value it is pointing to and updates sliders representing saturation \u0026 brightness to reflect it’s new value:\n\n\t//There are 3 @IBOutlets: hueSlide,satSlide, and brightSlide\n\t\n\thueSlide.actionBlock = { slider, value, finished in\n\t\tlet curSat = satSlide.value\n\t\tlet curBright = brightSlide.value\n\t\n\t\t//First disable animations so we get instantaneous updates\n\t\tCATransaction.begin()\n\t    CATransaction.setValue(true, forKey: kCATransactionDisableActions)\n\t\t\n\t\t//Reflect the new hue in the saturation slider\n\t\tsatSlide.setGradientVaryingSaturation(hue: value, brightness:curBright)\n\t\t\n\t\t//Reflect the new hue in the brightness slider \n\t\tbrightSlide.setGradientVaryingBrightness(hue: value, saturation: curSat) \n\t\t\n\t\t//Update hueSlider's thumb color to match our new value\n\t\tslider.thumbColor = UIColor(hue: value, saturation: curSat, brightness: curBright, alpha: 1.0) \n\t\t// (Note: We use the slider variable passed instead of 'hueSlide' to avoid retain cycles)\n\t    \n\t    CATransaction.commit()\n\t}\n\nImages showing the effect of dragging the hue slider\n![img alt](https://cloud.githubusercontent.com/assets/167242/9134674/55ae1c60-3cbb-11e5-888b-515dfc76898a.png)\n\n![img alt](https://cloud.githubusercontent.com/assets/167242/9134675/57c3043e-3cbb-11e5-8fa6-71b0f55b1105.png)\n\n## Customizing the Track\nBesides the background gradient, the track is customizable in several ways using the following properties:\n- `thickness:CGFloat` This sets the track’s thickness. The default value is 2pts\n- `borderColor:UIColor` This sets the color of the track’s border. The default value is black.\n- `borderWidth:CGFloat` This sets the width of the track’s border. The default value is 0 (i.e. no border).\n- `minimumValueImage:UIImage?` This places an image to the left of the track. Setting it to nil removes any image which is there. The default value is nil (i.e. no image).\n- `maximumValueImage:UIImage?` This places an image to the right of the track. Setting it to nil removes any image which is there. The default value is nil (i.e. no image). \n\t \n## Customizing the Thumb\nThe thumb can be resized, given a custom color or an icon (it can not have both a color and an icon at the same time). To customize the thumb, use the following properties:\n- `thumbSize:CGFloat` This sets the diameter of the thumb. Note: Resizing the thumb may change the slider’s intrisicContentSize. The default is 28.0 pts.\n- `thumbColor:UIColor` This sets the color displayed by the thumb. When the thumb has an associated icon, the color is automatically set to clearColor, and setting a new color removes the icon. The default value is White.\n- `thumbIcon:UIImage?` This sets the image to display inside the slider’s thumb. Setting an image automatically removes the thumbColor, and setting a color removes the icon. The default value is nil (i.e. no image)\n\n## License\nThe MIT License (MIT)\n\nCopyright (c) 2015 Jonathan Hull\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonhull%2FGradientSlider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonhull%2FGradientSlider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonhull%2FGradientSlider/lists"}